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属性。