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

【问题标题】：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/

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：