对选中的文字添加颜色

2025-04-01 | 0 浏览 | 0 评论

对选中的文字添加颜色

要在 JavaScript 中对选中的文本添加颜色，可以通过监听用户的文本选择事件，然后修改选定文本所在的元素的样式来实现。这里有一个基本的示例，演示如何在用户选定文本后为其添加颜色。

首先，我们需要监听 mouseup 事件，因为这是用户完成文本选择的一个标志。然后，我们可以获取当前文档中的选定范围，并应用相应的样式。

以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Selection Color</title>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>

<p>选择一些文本来尝试高亮显示。</p>

<script>
    document.addEventListener('mouseup', function() {
        var selection = window.getSelection();
        if (!selection.rangeCount) return;

        var range = selection.getRangeAt(0);

        // 创建一个新的 span 元素
        var span = document.createElement('span');
        span.className = 'highlight'; // 添加类名以便应用样式

        // 将选定的文本插入到 span 中
        span.appendChild(range.cloneContents());

        // 移除选定的文本
        range.deleteContents();

        // 将 span 插入到文档中
        range.insertNode(span);

        // 重新设置选择
        if (range.collapsed) {
            span.select();
        } else {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    });
</script>
</body>
</html>

解释：

HTML 部分：
- 页面中有一个 <p> 标签，用户可以选择其中的文本。
CSS 部分：
- 定义了一个 .highlight 类，用于更改选定文本的背景颜色。
JavaScript 部分：
- 监听 mouseup 事件，这是用户完成文本选择的标志。
- 获取当前文档中的选定范围 window.getSelection()。
- 如果存在选定范围，则创建一个新的 span 元素，并将其类名设置为 highlight。
- 将选定的文本克隆并插入到新的 span 中。
- 删除原来的选定文本。
- 将新的 span 插入到文档中。
- 重新设置选择，以便用户可以继续选择文本。

这种方法可以让你在用户选择文本时立即为其添加样式。注意，这种方法可能会改变原有的文档结构，因为会创建新的 span 元素来包裹选定的文本。如果你不希望改变原有的文档结构，还可以通过其他方式来达到类似的效果，例如使用伪元素或者在选定后立即恢复原始状态。

笔记