我有一个包含文本内容的 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标签划分)?
最佳答案
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>
关于Javascript选择文本突出显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29894781/