如何实现类似Google Docs的HTML文档评论功能？

我之前做类似的HTML文档评论功能时，也踩过自定义标签破坏HTML结构的坑——确实，随便插入自定义标签很容易打破原有的嵌套规则，导致渲染异常或者DOM解析错误。分享几个我试过的可行方案，你可以根据场景选：

1. 基于文本范围（Range）的无侵入式方案 #

这其实是Google Docs这类编辑器的核心思路：不修改原HTML结构，而是通过文本节点的位置关联评论。

具体步骤：

• 当用户选中一段文本添加评论时，用浏览器的Range API获取选中范围的起始节点、起始偏移量和结束节点、结束偏移量，把这些信息（再加上原HTML的标识）存储到后端。
• 渲染页面时，先加载原HTML，然后根据后端存储的位置信息，用Range API重新定位到对应的文本片段，接着在页面上添加悬浮的评论标记（比如在文本附近加个小图标），点击标记就能展开评论。
• 优势：完全不改动原HTML，不会破坏结构；评论和文本内容松耦合，编辑文本后也能通过重新计算偏移量来更新评论位置。
• 注意点：需要处理文本节点被分割、合并的情况（比如用户编辑后，原来的文本节点可能变化），这时候需要一套逻辑来更新Range的位置信息。

2. 用合法的行内元素包裹文本片段 #

如果必须在HTML中嵌入标记，那一定要保证元素的嵌套符合HTML规则——绝对不能跨块级标签包裹内容。

比如你举的错误例子：

<div> <p><mycustomtag>Some html </p>here</mycustomtag> </div>

可以拆分成两个关联的行内元素，绑定同一个评论ID：

<div>
  <p><span class="comment-block" data-comment-id="123">Some html </span></p>
  <span class="comment-block" data-comment-id="123">here</span>
</div>

• 实现思路：当用户选中跨标签的文本时，自动把选中的内容拆分到每个父标签内，用带评论ID的<span>包裹，后端存储评论ID和对应的文本内容。
• 优势：标记直接嵌入HTML，渲染时不需要额外计算位置；样式控制更灵活。
• 注意点：拆分文本时要处理好各种HTML标签的嵌套情况，比如列表、表格等复杂结构，避免拆分后破坏原有布局。

3. 基于DOM路径的外部标记方案 #

如果完全不想改动原HTML，可以通过DOM节点路径+字符偏移来定位评论位置，然后在页面上层添加独立的UI元素显示评论标记。

具体做法：

• 选中文本时，记录选中范围的起始节点的DOM路径（比如div > p:nth-child(2) > textNode[0]），以及该节点内的字符偏移量，还有结束节点的对应信息。
• 渲染时，根据DOM路径找到对应的节点，计算出文本在页面中的坐标，然后添加绝对定位的评论图标（比如一个小气泡），点击图标加载并显示评论。
• 优势：完全不碰原HTML，对原文档的影响为零；适合只读的HTML文档评论场景。
• 注意点：DOM路径可能会因为页面结构变化（比如添加/删除元素）而失效，所以需要给关键元素加唯一标识（比如data-doc-id）来提高定位的稳定性。

内容的提问来源于stack exchange，提问作者Pavlo Kozlov