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

Question

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

我的问题

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

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

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

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

“通过病毒利基有效地革新可互操作的人力资本。通过全局社区全面捕获世界级的潜力。客观地拥抱多学科利基平行范式。专业。”

到目前为止我做了什么

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

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

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

Answer 1

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

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