Javascript 如何在特定div中获取selection（）？_Javascript_Html_Css

Javascript 如何在特定div中获取selection（）？

javascript html css

Javascript 如何在特定div中获取selection（）？,javascript,html,css,Javascript,Html,Css,我有一个contenteditable div（id为“editor1”），允许用户输入文本。然后有一个函数，允许他们为任何突出显示的文本着色。My js使用window.getSelection（）.getRangeAt（0），但问题是它们可以突出显示div之外的单词，并且颜色也会改变。目前为止我试过： function red(){ { var getText = document.getElementById("editor1").in

我有一个contenteditable div（id为“editor1”），允许用户输入文本。然后有一个函数，允许他们为任何突出显示的文本着色。My 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);
    }
    }

小提琴：

如你所见，如果我突出显示“这也将变为红色”，我也可以使用按钮使其变为红色。

如何仅在editor1 div中为突出显示的文本着色？

您正在查找此

  //html
  <body>
     <p id='editor1'>asdf</p>
     <button onclick='red()'>
     RED
     </button>
  </body>

  //JavaScript

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

//html
asdf
红色
//JavaScript
window.red=函数（）{
//var getText=document.getElementById（“editor1”）.innerHTML；
var selection=window.getSelection（）.getRangeAt（0）；
var selectedText=selection.extractContents（）；
var span=document.createElement（“span”）；
span.style.color=“红色”；
span.appendChild（selectedText）；
selection.insertNode（span）；
}

Plunker:

您可以使用

.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所述，这将首次起作用。但可能对许多高光不起作用（如果它们恰好被清除）。

div中的
元素创建了一个层次结构，其中div
是许多span
元素的父元素。解决方法是遍历节点的祖先，直到找到id为“foo”
的祖先
幸运的是，您可以使用他们的方法来为您做到这一点：
.
我已经有了工作功能，我已经编辑了我的问题以突出该问题。很抱歉，我不确定您的问题是什么。你的意思是说，如果你同时突出显示内部div和外部div，并且点击按钮，你希望div内部的元素只突出显示为红色吗？这正是问题所在。我链接了一个显示确切问题的提琴：https://jsfiddle.net/xacqzhvq/它是哪个浏览器？在chrome 51上，我知道该功能可以工作；但我不希望div“editor1”之外的任何东西也能改变颜色。在小提琴中向下滚动；在div外有一行文本，也可以使用按钮将其涂成红色-我不希望这样；我只希望div中的任何文本都可以着色。您可能必须递归检查parentNode，直到到达正文，因为contenteditable将在不同的层次结构中创建多个标记。@z0MB3很好，因为这只是一个“突出显示一次”的操作，它会起作用。我建议OP使用jQuery的.nestest（）函数。我将在编辑中提到这一点。Firefox没有baseNode，但Chrome和FF都有focusNode，所以我使用了它。
if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;