如何在跨度中包装跨越节点边界的文本？答案

【问题标题】：How to wrap text that crosses node boundaries in span(s)?如何在跨度中包装跨越节点边界的文本？
【发布时间】：2016-06-15 15:47:58
【问题描述】：

我想为用户在我的网页上选择的文本应用一种样式，例如黄色背景。不幸的是，所选文本可能会跨越节点边界（例如，它可能从一个 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）仅限于选择不跨越节点边界的情况。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

要应用一种样式，我建议不要错过您的 html，而是可以使用它：

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

无论如何，问题在于您只能更改color 和background CSS 属性。

【讨论】：