如何在特定的div中获取Selection()

我有一个内容可编辑的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/

正如你所看到的，如果我突出显示"这也会变成红色"，我也可以使用按钮使其变成红色。如何仅在editor1div中为突出显示的文本着色？

您可以使用.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内的<span>元素创建了一个层次结构，其中div是许多span元素的父元素。解决方案是遍历节点的祖先，直到找到id为"foo"的节点。

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

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

以下是.closest()的原生JS实现方法的答案。

试试这个代码：

function addBold(){
 
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;
 


  const selection = window.getSelection().getRangeAt(0);
  
  let selectedParent = selection.commonAncestorContainer.parentElement;
  
  let mainParent = selectedParent;
  
  if(selectedParent.closest("b"))
  {
  //Unbold
    var text = document.createTextNode(selectedParent.textContent);
    mainParent = selectedParent.parentElement;
    mainParent.insertBefore(text, selectedParent);
    mainParent.removeChild(selectedParent);
    mainParent.normalize();
  }
  else
  {
    const span = document.createElement("b");
    span.appendChild(selection.extractContents());
    selection.insertNode(span);
    mainParent.normalize();
  }
  
  if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {  // IE?
    document.selection.empty();
  }


};

<div id="editor" contenteditable="true">
You are the programmers of the future 
</div>

<button onclick="addBold()">Bold</button>

我得到了代码，并添加了以下答案的编辑：

使用Window.getSelection（）加粗/取消加粗所选文本

特定id内的getSelection（）.focusNode不起作用

你在找这个吗，

  //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);
    }

Plunker：https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

相关内容

最新更新

热门标签：