在 JQuery 或 JavaScript 中用 span 元素包裹高亮文本答案

【问题标题】：Wrap the highlight text with span element in JQuery or JavaScript在 JQuery 或 JavaScript 中用 span 元素包裹高亮文本
【发布时间】：2016-11-11 19:21:42
【问题描述】：

这是我的代码，但如果您覆盖突出显示的文本，则会出现错误。
错误是：

未捕获的 InvalidStateError：无法执行“surroundContents” 'Range'：Range 部分选择了非文本节点。

function surroundSelection() {
  var span = document.createElement("span");
  span.setAttribute('class', 'hlt')

  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0).cloneRange();
      range.surroundContents(span);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
}

【问题讨论】：

你尝试过什么来解决这个问题？错误很明显：选择包括不是文本节点的节点的一部分，因此surroundContents 本身无法完成这项工作。您必须查看范围内的内容并处理如何突出显示选择交叉元素。 MDN 甚至标记了这一点：“但是，如果 Range 将一个非文本节点拆分为只有一个边界点，则会引发异常。” 所以你需要多个在这种情况下跨度。
是的，我不知道它如何传递给元素并覆盖突出显示。是的，我需要更多的跨度元素。希望有人可以帮助我。
自己解决问题将是最好的帮助。否则，这只是一个“请为我写这个”请求，而不是一个问题。

标签： javascript jquery html css highlight

【解决方案1】：

试试这个：

function surroundSelection() {       
    var selection= window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span= document.createElement("span");
    span.setAttribute('class', 'hlt')
    span.appendChild(selectedText);
    selection.insertNode(span);
}

【讨论】：

它是正确的。但是当我们有多个段落时，这将无法正常工作。