如何突出显示文本，然后将其保存以便下次访问同一页面时显示？

Posted 2023-03-06

【中文标题】如何突出显示文本，然后将其保存以便下次访问同一页面时显示？

【英文标题】：How do I highlight text, and then save it so it appears the next time I come to the same page?

【发布时间】：2015-10-27 13:57:06

【问题描述】：

我正在尝试编写一个网站，允许用户突出显示某些文本（将背景更改为黄色），然后应用程序将保存它，以便下次他或她返回页面时，它将是已经是黄色了（好像他们从未离开过一样）。

这是两个问题合二为一：

我可以使用window.getSelection().toString() 获取文本，但我不知道如何将其作为选择器获取，因此我可以将选择的背景更改为黄色。

我不知道如何获取选择的“地址”。我需要这个，以便我可以将其保存到数据库中，并在用户下次加载页面时将其涂成黄色。

编辑目前正在调查：https://github.com/timdown/rangy

【问题讨论】：

这个怎么样？ ::-moz-selection /* Code for Firefox */ color: red; background: yellow; ::selection color: red; background: yellow;

这不会持续下去吧？

【参考方案1】：

您需要使用一个设置所需背景颜色样式的类将所选文本包装在 <span> 中。 This question 应该会有所帮助。

这在某种程度上取决于您的后端架构。您可能想要存储element with the highlighted text，以及高亮的起点和终点的索引。然后，当再次提供页面时，相应地重新应用<span>。如果您没有在数据库中存储任何内容，您可以尝试将这些数据存储在 localStorage 中，然后对其进行解析并在页面加载时应用高亮显示。

编辑： 我可能误会了。如果您正在谈论重置实际突出显示（如文本被重新选择），you can do that with javascript as well。您仍然需要一种方法来存储用户的选择数据，无论是服务器端还是通过 localStorage。

【讨论】：

是的，我读过一些关于 X-Path 的文章？这似乎是一种我可以保存到数据库的“地址”？

XPath 是一种用于导航 XML 节点的查询语言。就其本身而言，这不会是一个解决方案。如果您需要将数据持久化到数据库中，您可能需要在后端系统上做一些功课。这个话题太大了，无法以 *** 的问答形式讨论。