javascript - 如何在特定的 div 中获取选择()？

Question

我有一个允许用户输入文本的 contenteditable div(id 为“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);
    }
    }

fiddle :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您可以检查以确保它是那个元素:

Demo

---

正如@z0mBi3 指出的那样，这将在第一次工作。但可能不适用于许多亮点(如果它们碰巧被清除)。 <span> div 内的元素创建一个层次结构，其中 div是许多 span 的父元素元素。解决方案是向上遍历节点的祖先，直到找到一个 ID 为 "foo" 的节点。 .

幸运的是你可以使用 jQuery使用他们的 .closest() 为您做到这一点方法:

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

Here is an answer with a native JS implemented method of .closest() .