选中文本添加评论，window.getSelection实现方法

本文深入讲解了如何利用 `window.getSelection()` 实现网页内联评论功能，从精准捕获用户划选文本、严格验证选区有效性（如排除 contenteditable 和空白内容），到基于 Range 锚定 DOM 节点路径与偏移量实现稳定上下文定位，再到包裹高亮标记、绑定交互行为并处理跨节点、跨 iframe 等边界情况，全面覆盖了从选中到评论展示的完整技术链路，兼顾健壮性与用户体验细节，是构建现代网页批注系统的核心实践指南。

直接用 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，用于后续还原时精确定位
• 对跨多个文本节点的选区（如跨越

  Hello world

  ），需合并所有被包含的 Text 节点片段，再按偏移切分——但简单评论功能通常限制为单文本节点内选区更稳定

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

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

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

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

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

• 选区跨