gpt4 book ai didi

javascript - 如何使用 Javascript 保留突出显示的选择?

转载 作者:太空宇宙 更新时间:2023-11-04 14:24:21 25 4
gpt4 key购买 nike

我想在网页上突出显示选定的文本。我经历了this solution Tim Down 建议,它为我完成了一半的工作。

现在我需要一种方法来永久突出显示文本。永久地,我的意思是当我突出显示一些文本时,关闭浏览器然后从本地重新打开页面,文本应该保持突出显示。只要我不刷新或关闭页面,Tim 的解决方案就会使文本突出显示。我想我需要在某处保存范围的开始和结束偏移量,以便下次我重新打开页面时可以再次突出显示所有范围。

编辑:抱歉,忘了说我在 iPhone 上工作,所以我可以在本地为特定页面保留一系列选择。任何存储可以嵌套或跨多个元素的选择范围的解决方案(例如 div/p/span)?

最佳答案

您需要两件事:一些序列化选择的方法和一些保存它的方法。 Cookie 和/或本地存储可以节省部分费用。对于序列化/反序列化,我建议在每个级别使用子节点索引创建某种通过 DOM 的路径以指定选择边界。请参阅类似问题的答案:Calculating text selection offsets in nest elements in Javascript

编辑:链接解决方案的摘要

用户的选择可以表示为一个Range对象。 Range 有一个开始和结束边界,每个边界都用节点内的偏移量表示。我链接到的答案是建议将每个边界序列化为通过表示节点的 DOM 的路径,再加上偏移量。例如,对于以下选择边界由 | 表示的文档:

<html><head><title>Foo</title></head><body>On|e <b>t|wo</b><div>

...您可以将选择开始边界表示为 "1/0:2",表示文档根中位置 1 的子节点的位置 0 的子节点内的偏移量 2 .同样,结束边界将是 "1/1/0:1"。您可以将整个 JSON 表示为 '{"start":"1/0:2",end:"1/1/0:1"}'

关于javascript - 如何使用 Javascript 保留突出显示的选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3607578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com