在浏览器上存储有关文本选择的信息答案

【问题标题】：Store information about a text selection on the browser在浏览器上存储有关文本选择的信息
【发布时间】：2015-05-25 12:10:49
【问题描述】：

我想突出显示 html 页面中的一系列文本并获取突出显示的位置，然后用于存储 cmets。

我的问题

我有一个文章页面，允许用户突出显示选定的文本并添加评论。我已经到了可以在所选文本右侧放置一个 UI 框以输入评论的程度（想想谷歌文档）。

我需要存储有关所选文本的信息，以便可以将其链接到任何 cmets。理想情况下，我只存储选定的文本，然后扫描该选择的内容。这有一个重大缺陷：如果同一文本选择的两个或多个副本出现在内容中怎么办。

内容本身是存储在数据库中的 HTML。

例如，以下段落的选择已突出显示（粗体选择）。我需要存储有关选择的信息以便将来能够找到它：

“通过病毒式利基有效地彻底改变可互操作的人力资本。通过全球社区全面抓住世界级的潜力。客观地接受平行范式的多学科利基。专业。”

到目前为止我做了什么

使用文本选择range 的getBoundingClientRect() 可以获取到页面顶部的距离。虽然对于定位 UI 评论框很有用，但我认为这不会帮助我将 cmets 链接到他们选择的文本。

我可以从window.getSelection() 获取选定的文本，但可能会出现多次。

我不想修改内容。即如果我可以帮助它，将选择包含在 span 或类似内容中，就好像删除了评论一样，他们删除标记可能会很棘手。

【问题讨论】：

【解决方案1】：

window.getSelection 为您提供的对象不仅仅是文本。您可以存储整个对象，您将拥有几乎所有您需要的信息。 https://developer.mozilla.org/en-US/docs/Web/API/Selection

通常，anchorNode（您可以在其上应用 parentNode 以获取选择开始的部分）和 startOffset 对于您的所有选择应该是唯一的，并且您可以准确定位已选择的字符，而无需依赖文本内容。

【讨论】：

【解决方案2】：

最好的办法是将 cmets 设置为文本中的偏移量（即字符 #100 到字符 #150）。

当人们编辑您的文档时，您必须解决差异（如果他们不这样做，那就更好了！），因此如果有人在放置评论的部分之前添加 10 个字符，评论现在指向110-160。

【讨论】：

此方法的唯一问题是范围内的startOffset 和endOffset 是部分的一部分。即一个段落将是一个部分，但如果一个段落在中间包含一个链接，那么它将该段落分成两个部分，因此startOffset 可以为 0，但来自第二段的第二部分。虽然没有办法知道哪些部分。
看起来getRangeAt(0) 提供的偏移量是相对于“部分”而不是整个文本。如果我突出显示第二段的第一个单词，startOffset 是 0。
@iamjonesy 在这种情况下，您只需将该本地偏移量添加到整个部分从文本开头开始的偏移量，您只需执行一次计算。