Javascript - 替换选择后无法获取所选文本的父级答案

【问题标题】：Javascript - Cannot Get Parent Of Selected Text After Replacing The SelectionJavascript - 替换选择后无法获取所选文本的父级
【发布时间】：2016-05-12 12:54:18
【问题描述】：

我正在尝试获取所选文本的最近父元素，如果所选文本没有被替换，它可以工作，但在文本替换后它会失败。

这是代码（我从其他来源修改）：

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

【问题讨论】：

标签： javascript dom range selection textnode

【解决方案1】：

节点选择边界应该移动到节点的内容。所以请改用selectNodeContents。

在这个问题的情况下，它应该是： ranges[i].selectNodeContents(elements[i]); 而不是 ranges[i].selectNode(elements[i]);

更新：

Fiddle Demo

【讨论】：