如何记录文本在页面上的位置？

Posted 2023-05-09

【中文标题】如何记录文本在页面上的位置？

【英文标题】：How to record the position of text on a page?

【发布时间】：2013-02-10 01:23:07

【问题描述】：

我想要做的是允许用户在页面上选择一段文本并突出显示它，然后能够加载此选择并在进一步访问时重新突出显示它（使用纯客户端 javascript，我打算将来将其打包到 Chrome 扩展中）。

我使用window.getSelection 选择文本，但是AFAIK 这并没有给我任何关于所选文本（或元素）的索引或位置数据。

我目前能想到的唯一方法是记录实际文本并搜索它，但这会引发唯一性问题（同一字符串可能会在给定页面上多次出现）。有没有一种方法可以向上遍历 DOM 树并将“路径”存储到包含元素（然后只需要担心该元素内的唯一性）？如果没有更好的方法，我会很高兴。

谢谢

编辑：我现在正在做的事情类似于：http://jsfiddle.net/e3XX6/

【问题讨论】：

你打算如何保持他们选择的状态？还是你的问题？

你能展示你目前使用的代码来获取这个字符串吗？该代码对您的问题很有用，live demo 会更有用。

Brad：我正在尝试找出一种保持状态的方法（知道在随后的页面加载中要重新选择文本的位置）@DavidThomas 感谢您的建议，添加了一个 jsfiddle

【参考方案1】：

您检查过getSelection() 方法返回的selection 对象吗？例如，它有一个anchorNode 属性，而后者又具有一个parentElement 属性。最后一个属性会告诉你包含文本的元素。

查看这个版本的小提琴（打开你的控制台！）：http://jsfiddle.net/e3XX6/1/

此外，由于您要将其作为 Chrome 扩展程序，因此我只建议使用 html5 Web Storage 来记住选择。

【讨论】：

谢谢，这很有帮助（我不知道 parentElement 属性）

有关Selection对象的更多信息，请参阅developer.mozilla.org/en-US/docs/DOM/Selection

您可能还想查看code.google.com/p/rangy，尤其是当您需要开始在不同浏览器中使用范围时。

谢谢，但我只需要它在 Chrome 中工作（我知道我已经开始使用一些跨浏览器代码，但我已经改变主意并为此计划）