如何使用Javascript持久化突出显示的选择？_Javascript_Html_Dom_Persistence

如何使用Javascript持久化突出显示的选择？

javascript html dom

如何使用Javascript持久化突出显示的选择？,javascript,html,dom,persistence,Javascript,Html,Dom,Persistence,我想突出显示网页上选定的文本。我已经通过了蒂姆·道恩的建议，这帮我完成了一半的工作现在我需要一种方法来永久突出显示文本。永久性，我的意思是当我突出显示某些文本时，关闭浏览器，然后从本地重新打开页面，文本应保持突出显示。只要我不刷新或关闭页面，Tim的解决方案就会保持文本高亮显示。我想我需要将范围的开始和结束偏移保存在某个位置，以便下次重新打开页面时，我可以再次突出显示所有范围编辑：对不起，我忘了提到我正在使用iPhone，以便在本地为特定页面保留一系列选择。存储可嵌套或跨多个元素（例如，di

我想突出显示网页上选定的文本。我已经通过了蒂姆·道恩的建议，这帮我完成了一半的工作

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

编辑：对不起，我忘了提到我正在使用iPhone，以便在本地为特定页面保留一系列选择。存储可嵌套或跨多个元素（例如，

div

span

）的选择范围的任何解决方案？

本地保存数据的选项是使用cookie：

或HTML5本地存储：

但明显的缺点是它与当前的浏览器和计算机相关联。如果您想要更持久的东西，您应该使用某种服务器端帮助。你的要求是什么

我想您可以保存开始和结束位置，然后在页面加载时使用

document.createRange

然后是方法

setStart

和

setEnd

您需要两件事：一种是序列化选择的方法，另一种是保存选择的方法。Cookie和/或本地存储可用于保存部分。对于序列化/反序列化，我建议在每个级别使用子节点索引创建某种通过DOM的路径，以指定选择边界。请参见对类似问题的回答：

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

用户的选择可以表示为

范围

对象。范围有一个开始边界和结束边界，每个边界用节点内的偏移量表示。我链接到的答案是，将每个边界序列化为通过表示节点的DOM的路径，再加上偏移量。例如，对于选择边界由

表示的以下文档：

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

FooOn | e t | wo

。。。您可以将选择开始边界表示为

“1/0:2”

，表示文档根中位置1处的子节点的位置0处的子节点内的偏移量2。类似地，末端边界将是

“1/1/0:1”

。您可以将整个JSON表示为

“{”start:“1/0:2”，end:“1/1/0:1”}

这里有一个宝贵的发现：MASHA（Mark&Share的缩写）是一个JavaScript实用程序，允许您标记网页内容的有趣部分并共享它

它也在GitHub上

甚至可以在移动Safari上使用，IE是一个非常好的跨浏览器范围和选择库，由Tim Down编写，因为他写了这个问题的答案。它封装了Tim描述的选择器类型（例如“0/1/2:34”），并添加了两个帮助函数，用于将结果持久化到cookie中。但是，您可以很容易地忽略helper函数，并将其持久化到其他地方，例如本地存储或web服务

总而言之，这是一个很好的解决方案，解决了在浏览器会话中持续选择的问题。

我不明白他在做什么。我可以使用div、span、p、，任何有效标记。是否有任何方法在选择时提取范围信息。我喜欢您的突出显示解决方案，并希望扩展它以解决我的问题。有任何解决方案吗？找到了在该链接上存储范围的方法。这与我的建议非常相似。出于跨浏览器兼容性的考虑，我最初没有建议使用XPath。找到了一种存储范围的方法，如何使其不将选择扩展到单词？（例如，能够在一个单词中选择几个单词）