我想突出显示 html 页面中的一系列文本并获取突出显示的位置,然后用于存储评论。
我的问题
我有一个文章页面,允许用户突出显示所选文本并添加评论。我已经到了可以在所选文本右侧放置一个 UI 框以输入评论的程度(想想谷歌文档)。
我需要存储有关所选文本的信息,以便我可以将其链接到任何评论。理想情况下,我只存储选定的文本,然后扫描该选择的内容。这有一个主要缺陷:如果内容中出现相同文本选择的两个或多个副本怎么办。
内容本身是存储在数据库中的 HTML。
例如,以下段落的选择已突出显示(粗体选择)。我需要存储有关选择的信息以便将来能够找到它:
“通过病毒利基有效地革新可互操作的人力资本。通过全局社区全面捕获世界级的潜力。客观地拥抱多学科利基平行范式。专业。”
到目前为止我做了什么
使用文本选择 range
的 getBoundingClientRect()
我可以获得距页面顶部的距离。尽管对于定位 UI 评论框很有用,但我认为这不会帮助我将评论链接到他们选择的文本。
我可以从 window.getSelection()
中获取选定的文本,但可能会出现多次。
我不想修改内容。即,如果我可以帮助它,就像删除评论一样,将选择包装在 span
或类似的内容中,这对他们来说删除标记可能很棘手。
最佳答案
window.getSelection 为您提供的对象不仅仅是文本。您可以存储整个对象,您将拥有几乎所有需要的信息。 https://developer.mozilla.org/en-US/docs/Web/API/Selection
通常是 anchorNode(您可以在其上应用 parentNode 以获取选择开始的部分)和 startOffset 对于您的所有选择应该是唯一的,并且您可以准确地定位已选择的字符而不依赖文本内容。
关于javascript - 在浏览器上存储有关文本选择的信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30438084/