Javascript - 取代所選文本後無法獲得選定文本的父項

Question

我想要獲取所選文本的最接近的父元素，它在所選文本未被替換時起作用，但在文本替換後失敗。

下面是代碼（I來自其他源修改）：

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]);

更新：

Fiddle Demo