如何在特定的div中获取getSelection（）？

Question

我有一个contenteditable div（标识为“ editor1”），允许用户输入文本。然后有一个功能，使他们可以为任何突出显示的文本着色。我的js使用window.getSelection().getRangeAt(0)，但是这样做的问题是它们可以突出显示div之外的单词，并且它们的颜色也会改变。至今; 我试过了：

        function red(){
    {       
        var getText = document.getElementById("editor1").innerHTML;
        var selection = getText.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.color = "red";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

小提琴：https : //jsfiddle.net/xacqzhvq/

如您所见，如果我突出显示“这也会变成红色”，我也可以使用按钮将其设置为红色。如何仅在editor1 div中仅对突出显示的文本着色？

Answer 1

您可以使用选择从中获取节点元素.baseNode。从那里您可以获取父节点并将其用于比较。

function red(){
    // If it's not the element with an id of "foo" stop the function and return
    if(window.getSelection().baseNode.parentNode.id != "foo") return;
    ...
    // Highlight if it is our div.
}

在下面的示例中，我制作了div一个id，您可以检查该元素以确保它是该元素：

演示版

正如@ z0mBi3指出的，这将是第一次工作。但是对于许多重点（如果碰巧被清除）可能不起作用。在<span>里面的元素div创建层次结构，其中div是很多人的父元素span的元素。解决方案是遍历该节点的祖先，直到找到ID为的节点"foo"。

幸运的是，您可以使用jQuery通过使用jQuery的.closest()方法为您做到这一点：

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

这是使用JS实现的本地方法的答案.closest()。