javascript - 如何包装跨越跨度节点边界的文本？

Question

我想对用户在我的网页上选择的文本应用一种样式，例如黄色背景。不幸的是，选定的文本可能会跨越节点边界(例如，它可能从一个 div 的中间开始并在另一个 div 的中间结束)。

将一个跨度(或多个跨度)环绕所有选定文本的最佳方式是什么？

设置

<div>This sentence is not selected. THIS SENTENCE </div>
<div>IS SELECTED. This sentence is not selected.</div>

想要的结果

<div>This sentence is not selected. <span>THIS SENTENCE</span> </div>
<div> <span>IS SELECTED.</span> This sentence is not selected.</div>    

这里有两个类似的问题(one，two)仅限于选择不跨越节点边界的情况。

Answer 1

只有 Firefox 允许每次选择多个范围。
使用 getSelection() 将所有其他浏览器限制在一个范围内。