Question

我试图让学生阅读网页以突出显示多个文本区域。我有一些javascript有点工作。在mouseup事件上，它会在所选文本周围添加一个span，但是当选择跨越另一个标记（例如段落）时会抛出DOMException，因为最终会出现嵌套不正确的标记。参见：

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

Answer 1

如果删除＆＃34; if＆＃34;，它将正常工作：

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个childNodes（extracContents.childNodes）。您还可以设置不透明度的颜色以查看所有交叉点：

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

删除！important

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

1 个答案: