在瀏覽器上存儲關於文本選擇的信息

我想突出顯示html頁面中的一系列文本，並獲取突出顯示的位置，然後用它來存儲註釋。在瀏覽器上存儲關於文本選擇的信息

我的問題

我有一篇文章頁面，允許用戶突出顯示選定的文本並添加註釋。我有它的一個點，我可以在所選文本的右側放置一個UI框來輸入評論（認爲谷歌文檔）。

我需要存儲有關選定文本的信息，以便我可以將其鏈接到任何評論。理想情況下，我只需存儲選定的文本，然後掃描該選擇的內容。這存在一個主要缺陷：如果在內容中出現兩個或更多相同文本選擇的副本。

內容本身是存儲在數據庫中的HTML。

例如，突出顯示了以下段落的選擇（粗體選擇）。我需要存儲關於選擇的信息，以便能夠找到它的未來：

「有效地通過病毒龕革命性互操作的人力資本通過全球社區Holisticly抓住世界級潛力客觀地擁抱多學科龕並行。範式，專業。「

我到目前爲止已經

進行使用文本選擇range的getBoundingClientRect()我可以從頁面頂部的距離。雖然對定位UI評論框很有用，但我不認爲這會幫助我將評論鏈接到他們選定的文本。

我可以從window.getSelection()中獲得所選文字，但可能有多處出現。

我想不修改內容。即，如果我可以幫助它，就像將評論移除一樣，將選擇內容包含在span或類似內容中，但對於他們刪除標記可能會很棘手。

來源

2015-05-25 iamjonesy

最好的辦法是在你的文本中設置偏移量的註釋（即字符＃100到字符＃150）。

當人們編輯您的文檔時（如果他們不這樣做，一切都會更好！），您必須解決差異問題，所以如果有人在發表評論的部分之前添加了10個字符，到110-160。

來源

2015-05-25 12:18:06

此方法的唯一問題是該範圍內的'startOffset'和'endOffset'作爲部分的一部分。即一個段落將會是一個段落，但是如果一個段落在中間包含一個鏈接，那麼它將該段落分成兩段，所以'startOffset'可以是0，但是從第二段落的第二段落開始。雖然沒有辦法知道哪些部分。 – iamjonesy

使用整個文本作爲相對點。忽略這些部分。 –

它看起來像提供'getRangeAt（0）'偏移是相對於'節'而不是整個文本。如果我突出顯示第二段的第一個單詞，那麼'startOffset'爲0. – iamjonesy

window.getSelection爲您提供的不僅僅是文本。你可以存儲整個對象，你幾乎可以獲得所有你需要的信息。 https://developer.mozilla.org/en-US/docs/Web/API/Selection

通常anchorNode（您可以申請parentNode獲得其中的選擇已經開始部分），並開始偏移應該是所有選擇獨特，可以定位正是那些不依賴於文字被選中的角色內容。

來源

2015-05-25 15:47:18

在瀏覽器上存儲關於文本選擇的信息

回答

相關問題