如何利用 window.getSelection 捕获用户在网页上划选的文本并实现自定义评论功能

window.getSelection() 获取选区并验证有效性是实现网页内联评论的基础，需检查 rangeCount、过滤空白文本、排除 contenteditable 等区域，再通过 Range 定位节点路径与偏移量锚定上下文，包裹高亮标记并绑定交互行为。

直接用 window.getSelection() 获取用户划选的文本，再结合 DOM 操作插入自定义评论标记，是实现网页内联评论的基础。关键在于及时捕获选区、准确定位上下文、避免干扰原有交互。

获取并验证用户划选的文本

用户划选后，getSelection() 返回一个 Selection 对象。需检查其是否非空、是否在可编辑区域外（如避免误捕 contenteditable 元素内的编辑态选区），且推荐只处理纯文本节点上的选区：

• 调用 const sel = window.getSelection();，若 sel.rangeCount === 0 则无有效选区
• 用 sel.toString().trim() 获取实际文本，过滤空白或过短内容（如少于 2 字）
• 通过 sel.getRangeAt(0) 获取首个 Range，再用 range.commonAncestorContainer 判断是否落在 contenteditable 或 input/textarea 内——这类区域通常不触发评论

定位选区在 DOM 中的精确位置

不能只靠文本内容匹配，必须锚定到原始节点。最可靠方式是基于 Range 构建唯一上下文标识：

• 提取 range.startContainer 和 range.endContainer 的路径（例如从目标节点逐级向上取 parentNode 的索引）
• 记录 range.startOffset 和 endOffset，用于后续还原时精确定位
• 对跨多个文本节点的选区（如跨越 <p><span>Hello</span> world</p>），需合并所有被包含的 Text 节点片段，再按偏移切分——但简单评论功能通常限制为单文本节点内选区更稳定

插入带锚点的评论 UI 并绑定行为

不直接修改原文本，而是包裹选区生成可交互的高亮标记，并悬浮显示评论输入框：

• 用 range.surroundContents() 将选区包裹进一个 <span class="annotated" data-comment-id="c1">，确保样式隔离（如加背景色+虚线边框）
• 监听该 span 的 click 或 contextmenu，弹出轻量评论面板（可用 position: absolute + getBoundingClientRect() 定位）
• 提交评论后，将内容存入内存对象或发往后端，同时给 span 添加 data-has-comment="true" 等状态标记，便于后续加载时恢复

处理边界情况与用户体验细节

真实场景中需防御性处理，避免破坏页面结构或引发异常：

• 选区跨 <script>、<style> 或 iframe 内容时，range 可能无效，应提前跳过
• 用户连续快速划选不同区域，需防重复触发：可设节流（如 300ms 内只响应首次）或清空前一个临时标记
• 支持取消选区后自动隐藏评论面板；按 Esc 键关闭面板；点击面板外区域收起——这些细节能显著提升自然感