Question

我想在网页上突出显示一系列文字。我已经完成了Tim Down建议的this solution，它为我做了一半的工作。

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

编辑抱歉，忘记提及我正在使用iPhone，因此我可以针对特定页面在本地保留一系列选择。存储选择范围的任何解决方案都可以嵌套或跨多个元素（例如div / p / span）？

Answer 1

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

编辑：关联解决方案的摘要

用户的选择可以表示为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"}'。

Answer 2

这是一个宝贵的发现： MASHA （Mark＆amp; Share的缩写）是一个JavaScript实用程序，允许您标记网页内容的有趣部分并分享 http://mashajs.com/

它也在GitHub https://github.com/SmartTeleMax/MaSha

上

甚至可以在Mobile Safari和IE上使用

Answer 3

在本地保存数据的选项是使用cookie： http://www.w3schools.com/js/js_cookies.asp

或HTML5 localStorage： http://people.w3.org/mike/localstorage.html

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

我猜你可以保存开始和结束位置，然后在页面加载时重新创建范围 document.createRange然后是方法setStart和setEnd

https://developer.mozilla.org/en/DOM/document.createRange https://developer.mozilla.org/en/DOM/range.setStart

Answer 4

Rangy是一个非常好的跨浏览器范围和选择库，由Tim Down撰写，因为他写了这个问题的答案。它的Serializer module包含了Tim描述的那种选择器（例如“0/1/2：34”），并添加了几个辅助函数来将结果保存到cookie中。您可以轻松地忽略帮助程序功能，并在其他位置保留，例如本地存储或Web服务。

总而言之，它是解决浏览器会话持续选择问题的绝佳解决方案。

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

4 个答案: