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

Question

我想突出显示html页面中的一系列文字，然后获取突出显示的位置，然后用来存储评论。

我的问题

我有一个文章页面，允许用户突出显示文本选择并添加注释。我有一个点，我可以在所选文本的右侧放置一个UI框来输入评论（想想谷歌文档）。

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

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

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

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

到目前为止我做了什么

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

我可以从range获取所选文字，但可能会多次出现。

我不想修改内容。即如果我可以帮助它，将选择包装在window.getSelection()或类似内容中，就好像删除了注释一样，删除标记可能会很棘手。

Answer 1

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

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

Answer 2

您最好的选择是在文本的偏移量上设置注释（即字符＃100到字符＃150）。

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