javascript - 範囲のループで範囲操作 DOM

Question

tokensToRanges次の関数から作成された一連の範囲があります。

トークンを選択範囲に変換する

次に、各範囲をループして、それらにアクションを適用します。ただし、エラーが発生します。

キャッチされないエラー: 範囲エラー: DOM の変更後、範囲は無効になります ([WrappedRange("foobar":6)])

エラーが発生する理由がわかりましたが、一連の範囲をループして、それぞれを操作するにはどうすればよいでしょうか?

Answer 1

これは私が何度も直面してきたトリッキーな問題です。あなたのオプションは基本的に次のとおりです。

1. 範囲のリストを範囲境界のリストに変換します。境界のペアごとに範囲を作成し、DOM 操作を行い、調整が必要な残りの範囲境界を調整します。
2. 範囲のリストを生成したコードをリファクタリングして、一度に 1 つの範囲を提供します。

Answer 2

テキストハイライターを使用しているときに、この問題に遭遇しました。検索しようとしているスコープの内容を変更しているときに発生するようです。私の場合、範囲自体を解析しようとするのではなく、非表示のスパン要素を使用してテキストをカプセル化し、次に非表示のスパンのクラスを使用してその内容を操作し、非表示のスパンをアンラップしました。

あなたの場合はうまくいかないかもしれませんが、私にとっての解決策は、変更していた要素を囲む div 要素に範囲を広げることでした。