2016-09-13 9 views
0

私は、DOMの範囲を強調しようとしているはどのよう

概要と任意のHTML文字列から一定のHTMLを取得します。範囲が複数の要素にまたがる場合、要素をブロックしても、ハイライトクラスで範囲内の範囲を折り返すと、ページの外観が乱れることがあります。悪いことに、私は操作を逆にするきれいな方法を発見していない。 range.extractContents()は、タグが正しく閉じられるようにhtmlを修正する唯一の方法ですが、 "span"を削除した後に残る "span"の周りにshimノードを挿入して文書を変更します。

これを回避する私の考えは、別のアプローチを使用することです。私は、最も一般的な祖先のhtmlを、私のスパンを含む新しいhtmlに置き換えることができます。その後、オリジナルのhtmlを保存し、それを元に戻して「非表示」を達成します。 これは、元に戻す能力の問題を解決するために働くと思うが、私は同じ方法でhtmlを修正する方法を知らないrange.extractContents()それを修正します。

innerHtmlへの割り当ての右側には、htmlと「修正」の方法が適していますか?

+0

「innerHTML」に暗黙的に割り当てることは、HTMLパーサを使用することを伴うため、割り当てられたコードの構文エラーは自動的に固定されます。単に「innerHTML」に割り当てて固定コードを取得するために読み戻します。 [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)を使用することもできます。 –

+0

@MaratTanalin、私の質問は範囲が非常に狭く、あなたの答えは実際には私の非常に正確な質問に対する正確な答えです。 – toddmo

+0

オクラホマ、答えとしてコメントを追加しました。 –

答えて

0

innerHTMLに割り当てると、暗黙的にHTMLパーサが使用されるため、割り当てられたコードの構文エラーは自動的に修正されます。innerHTMLに割り当てて固定コードを取得するために戻します。 DOMParserを使用することもできます。

このような固定コードは、それぞれ特定のケースで期待するものではないことに注意してください。

1

最小侵襲方法は、範囲のテキストノードを取得し、各範囲に.getBoxQuads()を算出し、それらの座標上CSS filtersと絶対位置オーバーレイを挿入することになります。

+0

これは、domを台無しにしないための良いアイデアです。私は現在、ページ選択に範囲を単に追加する(選択させる)第3の解決策に着いた後、 ':: selection'で選択範囲をスタイルします。しかし、私は、範囲を超えて 'document.execCommand()'を使う* 4番目の解決法を調べようとしています!あなたのアイデアは悪くないし、国境が必要な場合は、私はそれを使用する必要がありますドームと混乱しないようにする必要があります。昨夜私が聞いた "陰影の陰影"もありますが、それが完璧な仕事をすることができるかどうかはわかりません。 – toddmo