Wilson@思源

目 录

对选中的文字添加颜色

要在 JavaScript 中对选中的文本添加颜色，可以通过监听用户的文本选择事件，然后修改选定文本所在的元素的样式来实现。这里有一个基本的示例，演示如何在用户选定文本后为其添加颜色。
首先，我们需要监听 mouseup​ 事件，因为这是用户完成文本选择的一个标志。然后，我们可以获取当前文档中的选定范围，并应用相应的样式。
以下是一个简单的例子：
html
Text Selection Color

选择一些文本来尝试高亮显示。

解释：

1.
HTML 部分：
页面中有一个 <p>​ 标签，用户可以选择其中的文本。
2.
CSS 部分：
定义了一个 .highlight​ 类，用于更改选定文本的背景颜色。
3.
JavaScript 部分：
监听 mouseup​ 事件，这是用户完成文本选择的标志。
获取当前文档中的选定范围 window.getSelection()​。
如果存在选定范围，则创建一个新的 span​ 元素，并将其类名设置为 highlight​。
将选定的文本克隆并插入到新的 span​ 中。
删除原来的选定文本。
将新的 span​ 插入到文档中。
重新设置选择，以便用户可以继续选择文本。
这种方法可以让你在用户选择文本时立即为其添加样式。注意，这种方法可能会改变原有的文档结构，因为会创建新的 span​ 元素来包裹选定的文本。如果你不希望改变原有的文档结构，还可以通过其他方式来达到类似的效果，例如使用伪元素或者在选定后立即恢复原始状态。