JS-surroundContents只在文本上保留高亮显示，约占高亮显示尝试的20%

Question

我正在使用mouseup事件来触发一个函数，该函数突出显示文本，并用跨度包围突出显示的文本（堆栈溢出函数）：

function highlightText(e) {

    var t = window.getSelection().toString();
    if (t) {
        $("#mySpan").remove();
        var range   = window.getSelection().getRangeAt(0);
            newNode = document.createElement("span");
        newNode.id  = 'mySpan';

        range.surroundContents(newNode);

    }
}

我遇到的主要问题是，只要包含surroundContents，文本只会在高亮显示尝试中高亮显示约20%（否则高亮显示会立即消失）。我尝试添加一个setTimeout，在1s内不调用surroundContent。我还尝试删除remove（）语句，但仍然没有效果。

你知道为什么会这样吗？

Answer 1

失败的可能原因是所选文本仅包含非文本节点的开头或结尾，而不是两者。

因此，如果运行该代码，只在下面选择这是Bo，它将失败（并抛出异常），因为它也没有捕获所选内容中的结束标记：

This is <em>bold</em>

因此，最终：

This is <em>bo

参考：https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents

Answer 2

Android上的Chromium也面临同样的问题。在某些特定情况下，range的调用。surroundContents（newNode）会导致页面重新加载等非常奇怪的行为。检查函数的文档后：

这种方法几乎等同于newNode。appendChild（range.extractContents（））；范围插入节点（newNode）。包围后，范围的边界点包括newNode。

所以显而易见的是应用另一种方法突出显示文本。我找到mark.js库，它完全符合我的要求，没有恼人的副作用。（这里有一个JSFiddle示例，展示了它是如何用来突出显示选择的）。不同之处在于库没有使用range.surroundContents（newNode）也没有newNode.appendChild，而是node.replaceChild。

基于此，这里是我遇到的问题的解决方案，我认为它也适用于你的情况。

function surroundRangeWithSpan(range) {
    var span = document.createElement('span');

    // The text is within the same node (no other html elements inside of it)
    if (range.startContainer.isEqualNode(range.endContainer) && range.startContainer.childNodes.length == 0) {
      // Here you customise your <span> element
      customSurroundContents(range, span);
    } else {
      // Here you have to break the selection down
    }
    return span;
  }

  function customSurroundContents(range, span) {
    var node = range.commonAncestorContainer;
    var startNode = node.splitText(range.startOffset);
    var ret = startNode.splitText(range.toString().length);
    span.textContent = startNode.textContent;
    startNode.parentNode.replaceChild(span, startNode);
  }

然后你通过窗口。getSelection（）。getRangeAt（0）到函数。