Javascript - не может родиться из выбранного текста после замены выбора

Question

Я пытаюсь получить ближайший родительский элемент выделенного текста, он работает, если выделенный текст не был заменен, но после замены текста он не работает.

Вот код (я изменил от другого источника):

jQuery(document).ready(function($){ 
    $("#getparent").on("click touch", function(){ 
     var selection, elements = [], ranges = [], rangeCount = 0, parent_id, parent_class;  
     if (window.getSelection){ 
      selection = window.getSelection(); 
      if (selection.rangeCount) { 
       var i = selection.rangeCount; 
       while (i--) { 
        selectionrange = selection.getRangeAt(i); 
        ranges[i] = selectionrange.cloneRange(); 

        // SELECTION START'S CONTAINER     
        var parentDataStart = selectionrange.startContainer.childNodes[ranges[i].startOffset]; 
        parentDataStart = parentDataStart || selectionrange.startContainer.parentNode; 
        var parentTagStart = parentDataStart.tagName.toLowerCase(); // parent tag name of selection 

        console.log(parentTagStart); 
        alert(parentTagStart); 

        // SELECTED TEXT NODE 
        selectedtext = selection.toString();      
        elements[i] = document.createTextNode(selectedtext); 
        ranges[i].deleteContents(); 
        ranges[i].insertNode(elements[i]); 
        ranges[i].selectNode(elements[i]); 
       } 

       // Restore text selection 
       selection.removeAllRanges(); 
       i = ranges.length; 
       while (i--) { 
        selection.addRange(ranges[i]); 
       } 
      } 
     } 
    }); 
}); 

И вот скрипка

DEMO

Answer 1

границы выбора узла следует переместить содержимое узла , Итак, используйте вместо этого selectNodeContents.

в случае этого вопроса, он должен быть: ranges[i].selectNodeContents(elements[i]); вместо ranges[i].selectNode(elements[i]);

Update:

Fiddle Demo