如何在span（s）中包装跨越节点边界的文本？

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()的一个范围。

Answer 2

要应用样式我建议不要错过你的html，而是你可以使用这个：

::selection {
    background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
    background: #ffb7b7; /* Gecko Browsers */
}

无论如何，问题是你只能改变color和background CSS属性。