有没有办法保存所选文本，并在刷新页面后再次突出显示它？ [英] Is there a way to save the selected text and highlight it again once the page is refreshed?

问题描述

我正在尝试选择文本并将该选择保存在localStorage或DB中，我可以通过从存储中读回来突出显示以前选择的文本。但是，如果所选文本位于页面中的多个位置，则所有实例都会突出显示，这是我不想要的。我可以抓住所选文本的左侧和顶部，但是在字体调整大小的情况下，左/顶部会发生变化。我在这里没有共享任何代码，因为没有任何内容可以与此相关。仅供参考，我指的是ipad中的iBooks应用程序具有相同的功能，我很想知道它是如何做到的？

I'm trying to select the text and save that selection in localStorage or DB, and I could highlight the previously selected text by reading it back from the storage. But if the selected text is on multiple location in the page then all the instances get highlighted which I do not want. I can grab the left and top of the selected text but in case of font resizing, the left/top changes. I'm not sharing any code here because there is nothing to share related to this. FYI, I'm referring to iBooks app in ipad which has the same feature and I'm willing to know how does it do it properly?

更新我尝试了一种新方法，其中我在所选文本周围添加标记，使用它我可以找出所选文本的开头和结尾稍后要突出显示的字符串。您可以在此处查看演示： http://jsfiddle.net/codef0rmer/jE4w5/

Update: I tried a new approach wherein i add markers around the selected text using which I could figure out the start and end of the selected string to be highlighted later. You can see the demo here: http://jsfiddle.net/codef0rmer/jE4w5/

但是在iPad rangeCount 无法正常工作，iPad有解决办法吗？

but in iPad rangeCount is not working, Is there any workaround for iPad?

推荐答案

您可以使用 window.getSelection（） - 至少在现代浏览器中。它将返回选择对象，您可以从播放该对象提供的属性开始：

You can get information about the current selection using window.getSelection() - at least in modern browsers. It will return a Selection object, you could start with playing with the properties supplied by that object:

• anchorNode
  返回选择开始的节点。

• anchorNode Returns the node in which the selection begins.

anchorOffset
返回选择的锚点在anchorNode中偏移的字符数。

anchorOffset Returns the number of characters that the selection's anchor is offset within the anchorNode.

focusNode
返回选择结束的节点。

focusNode Returns the node in which the selection ends.

focusOffset
返回选择焦点在focusNode中偏移的字符数。

focusOffset Returns the number of characters that the selection's focus is offset within the focusNode.

isCollapsed
返回一个布尔值，指示选择的起点和终点是否位于同一位置。

isCollapsed Returns a Boolean indicating whether the selection's start and end points are at the same position.

rangeCount
返回选择范围的数量。

rangeCount Returns the number of ranges in the selection.

此外，使用g getRangeAt（） 方法，您可以从选择中获取范围对象，这将提供更多有用的方法和属性。

Also, using the getRangeAt() method, you could get the Range objects from the Selection, which supply more useful methods and properties.

我不知道你想用这个解决方案走多远，你的问题很普遍，所以这更像是你可以去的方向而不是一个现成的解决方案。

I don't know how far you want to go with this solution, and your question is quite general, so this is more like a direction you could go rather than a ready-to-use solution.

这篇关于有没有办法保存所选文本，并在刷新页面后再次突出显示它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！