使用 javascript 允许用户多次突出显示答案

【问题标题】：Use javascript to allow multiple highlights by users使用 javascript 允许用户多次突出显示
【发布时间】：2018-09-30 09:08:44
【问题描述】：

我试图让阅读网页的学生突出显示多个文本区域。我有一些可以工作的javascript。 On a mouseup event, it adds a span around the selected text, but it throws a DOMException when the selection crosses another tag (e.g., paragraph) because you end up with improperly nested tags.见：

https://jsfiddle.net/pinecone/or6tjasg/

关于我如何处理这个问题的任何建议？感谢您的帮助。

    document.getElementById('highlight-area').addEventListener("mouseup", function(event) {
  highlightSelection();
});

function highlightSelection() {

  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0).cloneRange();
      var extracContents = range.cloneContents();
      if (extracContents.childNodes.length === 1) {
        range.deleteContents();
        var span = document.createElement("span");
        span.className = "highlight";
        span.appendChild(extracContents);
        range.insertNode(span);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  }
}

【问题讨论】：

标签： javascript dom highlight

【解决方案1】：

如果你去掉“if”，它会正常工作：

function highlightSelection() {

  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0).cloneRange();
      var extracContents = range.cloneContents();
      console.dir(extracContents.childNodes)
      // if (extracContents.childNodes.length === 1) {
      range.deleteContents();
      var span = document.createElement("span");
      span.className = "highlight";
      span.appendChild(extracContents);
      range.insertNode(span);
      sel.removeAllRanges();
      sel.addRange(range);
      // }
    }
  }
}

在一个交叉路口，您将拥有 3 个子节点（extraContents.childNodes）。您还可以设置不透明度的颜色以查看所有交叉点：

.highlight {
  background: rgba(255, 255, 0, .7);
}

删除 !important

【讨论】：