JS - surroundContents仅在文本中保留了大约20%的突出显示尝试

Question

我正在使用mouseup事件来触发一个突出显示文本的函数,并用一个span来覆盖突出显示的文本(来自堆栈溢出的函数):

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

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

因此，如果运行该代码时仅选择下面的“This is Bo”，它将失败（并引发异常），因为它也不会捕获选择中的结束标记：

This is <em>bold</em>

所以最终结果是：

This is <em>bo

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