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

Question

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

我正在使用 window.getSelection 选择文本，但据我所知，这并没有给我关于所选文本(或元素)的任何类型的索引或位置数据。

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

谢谢

编辑:我现在正在做的是类似这样的事情:http://jsfiddle.net/e3XX6/

Answer 1

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

查看此版本的 fiddle (打开控制台!):http://jsfiddle.net/e3XX6/1/

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