如何使用JavaScript保留突出顯示的選擇？

Question

我想突出顯示網頁上的某些文本。 我已經完成了Tim Down建議的解決方案，該解決方案為我完成了一半的工作。

現在，我需要一種永久突出顯示文本的方法。 永久地說，我的意思是當我突出顯示某些文本時，關閉瀏覽器，然后從本地重新打開頁面，文本應保持突出顯示。 只要我不刷新或關閉頁面，蒂姆的解決方案就會使文本保持突出顯示狀態。 我想我需要將范圍的開始和結束偏移量保存在某個地方，以便下次我重新打開頁面時可以再次突出顯示所有范圍。

編輯：對不起，忘了提到我在iPhone上工作，因此我可以在本地為特定頁面保留一系列選擇。 有什么解決方案可以存儲選擇范圍，這些范圍可以嵌套或跨越多個元素（例如div / p / span ）？

Answer 1

您需要做兩件事：序列化選擇的某些方法和保存選擇的某些方法。 Cookie和/或本地存儲將用於保存部分。 對於序列化/反序列化，我建議使用每個級別的子節點索引來指定選擇邊界，從而通過DOM創建某種路徑。 看到類似問題的答案：計算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＆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編寫的一個非常好的跨瀏覽器范圍和選擇庫，因為他寫下了這個問題的答案。 它的序列化器模塊包裝了Tim所描述的選擇器的種類（例如“ 0/1/2：34”），並添加了一些輔助函數以將結果持久化到cookie中。 但是，您可以輕松地忽略幫助程序功能，並將其保留在其他地方，例如本地存儲或Web服務。

總而言之，它是解決跨瀏覽器會話持久選擇問題的絕佳解決方案。

如何使用JavaScript保留突出顯示的選擇？

問題描述

4 個解決方案

解決方案1
4 已采納 2010-08-31 09:37:42

解決方案2
2 2012-07-06 15:34:00

解決方案3
1 2010-08-31 09:16:20

解決方案4
0 2012-10-09 11:45:04

如何使用JavaScript保留突出顯示的選擇？

問題描述

4 個解決方案

解決方案1 4 已采納 2010-08-31 09:37:42

解決方案2 2 2012-07-06 15:34:00

解決方案3 1 2010-08-31 09:16:20

解決方案4 0 2012-10-09 11:45:04

解決方案1
4 已采納 2010-08-31 09:37:42

解決方案2
2 2012-07-06 15:34:00

解決方案3
1 2010-08-31 09:16:20

解決方案4
0 2012-10-09 11:45:04