通过JavaScript实现选中字体变红，核心是监听鼠标选择事件，使用window.getSelection()获取用户选中的文本范围，遍历选区内的文本节点并动态添加color:red样式，需注意兼容性，旧版IE可用document.selection处理，此功能常用于文本编辑器高亮、关键词标记、评论场景等，提升用户交互体验，操作简单且效果直观，能有效突出用户关注的文本内容。
JavaScript实现选中文字变红：从基础原理到代码实践
在网页交互设计中，让用户选中的文字高亮显示是一种提升用户体验的有效手段——无论是笔记应用中的重点标记、阅读器中的段落突出，还是在线文档中的内容修订，"选中文字变红"都是最基础也最直观的高亮效果之一，本文将从技术原理出发，详细讲解如何用JavaScript实现这一功能,并提供完整的代码示例和扩展思路。
需求背景：为什么需要选中文字变红？
当用户在网页上选中文字时，浏览器默认会显示蓝色背景加白色文字的效果，在特定场景下,这种默认样式可能无法满足我们的需求：
-
教育类产品：学生可以通过红色标记重点内容，便于后续复习和记忆，在线教材或学习平台中，学生标记的关键知识点会以红色高亮显示,帮助他们快速定位重点。
-
文档协作工具：在多人协作的文档编辑环境中，审阅者可以用红色标记需要修改的文本段落，并提出修改建议,这种视觉反馈让作者能够快速识别需要调整的内容。
-
阅读优化应用：对于长篇文章或技术文档，用户可以通过"标记选中"功能突出显示关键信息，方便后续查找和回顾，在法律文档或学术论文中,用户可以标记重要的条款或结论。
要实现这一效果，核心在于两个关键技术点：获取用户选中的文字范围和对选中范围应用红色样式，JavaScript的Selection API和DOM操作正是完成这两步的关键。
核心原理：Selection API与DOM操作
什么是Selection API？
Selection API是浏览器提供的原生接口，用于表示用户在页面中选择的文本范围，通过window.getSelection()方法，我们可以获取一个Selection对象，该对象包含了用户选中的所有信息，如选中的文本内容、起始位置、结束位置等。
值得注意的是，Selection API与Range API密切相关，Selection对象可以包含一个或多个Range对象，每个Range对象代表一个连续的文本范围，在大多数情况下，用户只会选中一个连续范围，因此我们可以通过selection.getRangeAt(0)获取第一个（也是唯一的）Range对象。
关键方法与属性
以下是实现选中文字变红功能的核心方法和属性：
-
window.getSelection()：获取当前页面的Selection对象,返回一个Selection实例。 -
Selection.toString()：返回选中的文本内容,常用于判断用户是否选中了文本。 -
Selection.getRangeAt(index)：获取选中的Range对象，index通常为0（因为用户一般只选中一个连续范围）。 -
Range.surroundContents()：用指定元素包裹Range包含的文本,这是实现样式包裹的核心方法。 -
Range.commonAncestorContainer：获取包含选中范围的最近共同祖先节点,用于处理跨元素选中的情况。
DOM操作：动态添加样式
获取到选中范围后，我们需要创建一个带有红色样式的HTML元素（如<span>），然后用surroundContents()方法将选中文本包裹起来，这样选中的文字就会继承<span>的样式（如红色）。
需要注意的是，surroundContents()方法有一些限制：
- 选中的范围不能包含部分选择的状态（如只选中了某个标签的开始部分）
- 选中的范围不能跨越不可编辑的元素（如
<script>或<style>- 如果选中的是跨元素的文本（如选中了
<p>和<span>），直接使用surroundContents()会抛出异常 - 如果选中的是跨元素的文本（如选中了
实现步骤：从零开始写选中变红代码
步骤1：准备HTML结构
在页面中放置一段可被选中的文本,并添加必要的样式和提示信息：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">JS选中文字变红示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
color: #333;
}
.container {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.tip {
background-color: #e8f4f8;
border-left: 4px solid #3498db;
padding: 12px;
margin-bottom: 20px;
border-radius: 0 4px 4px 0;
}
.content {
background-color: white;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
line-height: 1.8;
}
/* 红色高亮样式 */
.red-highlight {
background-color: #ffebee;
color: #d32f2f;
padding: 0 2px;
border-radius: 2px;
}
.controls {
margin-top: 20px;
text-align: center;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>JavaScript选中文字变红示例</h1>
<div class="tip">
<strong>提示：</strong>用鼠标选中下方文字，选中后会自动变红，您可以尝试选中不同的文本内容，观察高亮效果。
</div>
<div class="content" id="text-content">
这是一段示例文字，您可以用鼠标选中其中的任意内容，比如选中"示例文字"这四个字，或者选中整段文字，选中后，文字会自动变成红色背景，方便您标记重点内容。
在实际应用中，这种功能可以用于在线文档编辑、教育平台、阅读器等多种场景，通过高亮显示用户选中的内容，可以增强交互体验，帮助用户更好地组织和理解信息。
</div>
<div class="controls">
<button id="clear-highlights">清除所有高亮</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
步骤2：编写JavaScript逻辑（script.js）
核心逻辑是：监听用户的"鼠标松开"事件（mouseup），在用户停止选中文
标签： #字体变红
