范圍循環中的亂碼操作DOM

Question

我有一組范圍，是從tokensToRanges函數創建的：

將令牌轉換為選擇范圍

現在，我想遍歷每個范圍，並對它們執行操作。 但是我得到一個錯誤：

未捕獲的錯誤：范圍錯誤：DOM突變后范圍不再有效（[WrappedRange（“ foobar”：6）]）

現在，我理解了為什么會收到錯誤，但是我想知道如何循環遍歷一組范圍並操縱每個范圍？

Answer 1

我遇到了好幾次棘手的問題。 您的選擇基本上是：

1. 將范圍列表轉換為范圍邊界列表。 對於每對邊界，創建一個范圍，進行DOM操作，並調整任何需要調整的剩余范圍邊界。
2. 重構生成范圍列表的代碼，一次給您一個范圍。

Answer 2

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

在您的情況下，它可能不起作用，但是對我來說，解決方案是將范圍簡單地擴展到一個div元素，該元素包含了我正在修改的div元素。