本文介绍如何利用浏览器原生 Selection API 实现真正双向、方向自适应的文本高亮功能，解决传统 mousemove 方案中鼠标反向拖拽时高亮无法动态调整的问题，并提供可复用的代码结构与最佳实践。
本文介绍如何利用浏览器原生 selection api 实现真正双向、方向自适应的文本高亮功能，解决传统 `mousemove` 方案中鼠标反向拖拽时高亮无法动态调整的问题，并提供可复用的代码结构与最佳实践。
在 Web 文本标注类应用（如教学辅助、法律文档批注、协作阅读工具）中，用户常需通过鼠标拖拽高亮连续文本段落。但若采用监听 mousemove 并手动维护起止索引的方式（如原代码中的 handleMouseMove），当用户中途反向拖动鼠标时，逻辑上仍按“从起点到当前点”扩展范围，导致已高亮区域无法智能收缩或重置——即高亮行为与光标实际移动方向脱节。
根本解法在于放弃手动追踪坐标与索引，转而拥抱浏览器原生的 Selection 和 Range API。该方案天然支持任意方向拖拽、跨元素选择、键盘辅助（Shift+方向键）、以及与系统剪贴板无缝兼容，且无需监听 mousemove，彻底规避方向判断难题。
✅ 核心实现逻辑
-
统一入口：mousedown 触发新高亮会话
每次按下鼠标时，清除旧的 ::selection 样式规则，并注入新的高亮色，确保视觉反馈一致：contentDiv.addEventListener('mousedown', (e) => { const sheet = document.styleSheets[0]; // 清除所有已存在的 ::selection 规则 Array.from(sheet.cssRules) .filter(rule => rule.selectorText?.includes('::selection')) .forEach((_, i) => sheet.deleteRule(i)); // 注入新颜色规则（作用于 #content 内 span） currentColor = getRandomColor(); sheet.insertRule(`#content span::selection { background-color: ${currentColor}; }`, sheet.cssRules.length); }); -
精准捕获：mouseup 解析真实选区
利用 window.getSelection() 获取用户最终选定的 DOM 片段，递归提取所有带 data-index 的 <span> 元素：function getSelectionElements() { const sel = window.getSelection(); if (!sel.rangeCount) return []; const container = document.createElement('div'); for (let i = 0; i < sel.rangeCount; i++) { const range = sel.getRangeAt(i); const fragment = range.cloneContents(); // 处理纯文本节点（如换行符）→ 用父级 span 替代 if (fragment.childNodes.length === 1 && fragment.firstChild.nodeType === Node.TEXT_NODE) { const parentSpan = e.target.closest('span'); if (parentSpan) container.appendChild(parentSpan.cloneNode()); } else { container.appendChild(fragment); } } return Array.from(container.querySelectorAll('span[data-index]')); } -
原子化高亮：逐元素应用背景色
遍历解析出的 <span>，检查是否已被高亮（避免重复），并记录索引用于后续撤销：contentDiv.addEventListener('mouseup', () => { const spans = getSelectionElements(); const currentIndexes = []; spans.forEach(span => { const idx = span.dataset.index; if (idx && !isHighlighted(idx)) { span.style.backgroundColor = currentColor; currentIndexes.push(idx); } }); if (currentIndexes.length > 0) { previousHighlight.push(currentIndexes); // 用于 undo } });
⚠️ 关键注意事项
- ::selection 的作用域限制：CSS ::selection 伪元素仅影响选中文本的默认高亮色，不替代 JavaScript 主动设置的 backgroundColor。二者协同工作：::selection 提供拖拽过程中的实时反馈，JS 设置则持久化高亮状态。
- DOM 稳定性保障：所有 <span> 必须拥有唯一 data-index，且生成后不再动态增删，否则 querySelector([data-index="x"]) 可能失效。
- 撤销与清空优化：改用 previousHighlight 数组存储每次操作的索引列表，undo 只需 pop() 并批量清除样式，比遍历 highlights 对象更高效、更可靠。
- 性能考量：对长文本（>500 词），避免在 mouseup 中执行复杂 DOM 查询。建议将 getSelectionElements() 返回的 span 元素直接缓存，而非反复 querySelector。
? 完整可运行示例（精简版）
<div id="content"></div>
<button id="undoHighlight">Undo</button>
<button id="removeHighlight">Clear</button>
<script>
const previousHighlight = [];
const availableColors = ["yellow", "red", "blue", "green", "orange"];
let usedColors = new Set();
function getRandomColor() {
if (availableColors.length === 0) {
[availableColors, usedColors] = [Array.from(usedColors), new Set()];
}
const idx = Math.floor(Math.random() * availableColors.length);
const color = availableColors.splice(idx, 1)[0];
usedColors.add(color);
return color;
}
// 初始化文本分词与 span 渲染（略，同原文）
// ...
// 高亮核心逻辑
document.getElementById('content').addEventListener('mousedown', () => {
const style = document.styleSheets[0];
for (let i = style.cssRules.length - 1; i >= 0; i--) {
if (style.cssRules[i].selectorText?.includes('::selection')) style.deleteRule(i);
}
const color = getRandomColor();
style.insertRule(`#content span::selection { background-color: ${color} !important; }`);
});
document.getElementById('content').addEventListener('mouseup', () => {
const sel = window.getSelection();
if (!sel.rangeCount) return;
const indexes = [];
for (let r = 0; r < sel.rangeCount; r++) {
const range = sel.getRangeAt(r);
const walker = document.createTreeWalker(
range.commonAncestorContainer,
NodeFilter.SHOW_ELEMENT,
{ acceptNode: node => node.tagName === 'SPAN' && node.dataset.index ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
);
while (walker.nextNode()) {
const span = walker.currentNode;
if (!span.style.backgroundColor) {
span.style.backgroundColor = getComputedStyle(document.querySelector('#content')).getPropertyValue('--current-highlight');
indexes.push(span.dataset.index);
}
}
}
if (indexes.length) previousHighlight.push(indexes);
});
// Undo / Clear
document.getElementById('undoHighlight').onclick = () => {
if (previousHighlight.length) {
previousHighlight.pop().forEach(idx => {
document.querySelector(`[data-index="${idx}"]`).style.backgroundColor = '';
});
}
};
document.getElementById('removeHighlight').onclick = () => {
document.querySelectorAll('#content span').forEach(el => el.style.backgroundColor = '');
previousHighlight.length = 0;
};
</script>此方案不仅解决了“反向拖拽失效”的原始需求，更以标准 API 为基础，提升了健壮性、可维护性与可访问性。开发者可在此骨架上轻松扩展多色标注、导出高亮数据、或与后端同步状态等功能。
