Javascript选择文本突出显示问题

Question

我有一个包含文本内容的 html 页面。选择任何文本并按突出显示按钮时，我可以更改所选文本的样式以突出显示相同的文本。为了实现这个功能，我编写了以下方法。

sel = window.getSelection();
var range = sel.getRangeAt(0);
var span = document.createElement('span');
span.className = "highlight" + color;
range.surroundContents(span);

如果您选择没有 html 标签的文本，则效果很好，但当文本之间有任何 html 标签时，则会出现错误

Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.

如何解决这个问题。是否可以为每个部分单独突出显示相同的内容(按html标签划分)？

Answer 1

参见Range.extractContents :

document.getElementById('execute').addEventListener('click', function() {
    var range = window.getSelection().getRangeAt(0),
        span = document.createElement('span');

    span.className = 'highlight';
    span.appendChild(range.extractContents());
    range.insertNode(span);
});

.highlight { background-color: yellow; }

<div id="test">
    Select any part of <b>this text and</b> then click 'Run'.
</div>

<button id="execute">Run</button>