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

标签 javascript jquery google-chrome dom google-chrome-extension

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

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

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

谢谢

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

最佳答案

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

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

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

关于javascript - 如何记录文本在页面上的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15057839/

相关文章:

javascript - 使用 CoffeeScript 从对象数组中选择一个字段

jquery - 减少选项卡和容器之间的距离

javascript - 在 Jquery 中循环更改文本

android - 在 Android 上的 Chrome 中获取物理屏幕尺寸/dpi/像素密度

google-chrome - jQuery跨域ajax请求不发送cookie

javascript - 让文本输入在到达末尾之前滚动

javascript - node.js 将表情符号转换为 unicode 或其他?

javascript - 确定切换了哪个切换 - Office UI Fabric - React

javascript - 根据选择的下拉框更改div

javascript - Chrome 扩展程序 : How to Manage separate instances of background pages?