瘦長操作DOM

Question

我有一組範圍，從tokensToRanges函數創建：

Convert tokens into selection ranges

現在我想遍歷每個範圍，並應用行爲給他們。不過，我得到一個錯誤：

Uncaught Error: Range error: Range is no longer valid after DOM mutation ([WrappedRange("foobar":6)])

現在我明白了爲什麼我收到的錯誤，但我不知道我怎麼能遍歷一組範圍，並操縱每一個？

Answer 1

這是一個棘手的問題，我已經跑了幾次。您的選項基本上是：

1. 將範圍列表轉換爲範圍邊界列表。對於每對邊界，創建一個範圍，執行DOM操作並調整需要調整的剩餘範圍邊界。
2. 重構生成範圍列表的代碼，以一次給出一個範圍。

Answer 2

我在使用文本熒光筆時遇到了這個問題。當您修改您要搜索的範圍的內容時，似乎發生這種情況。就我而言，我只是使用隱藏的span元素來封裝我的文本，而不是試圖解析範圍本身，然後使用隱藏範圍的類來操作其內容，然後解開隱藏的範圍。

它可能不適用於你的情況，但對我來說，解決的辦法是簡單地將範圍擴大到一個div元素，該元素包含我正在修改的那個元素。