スパンを挿入した後にテキストノードを併合する

Question

私は、ユーザーが選択したDOM構造のセクション（常に画面上のテキストの選択）を保存/取得している拡張機能を持っています。選択範囲を保存するときに、セクションをSPANタグに囲み、テキストを黄色で強調表示します。これにより、選択されたテキストの周りのDOM構造がさまざまなテキストノードに分割されます。これは、私がこの選択を復元しようとすると（ページを更新せずに）、DOM構造が変更されたときに問題を引き起こすため、問題が発生します。

私の質問は、SPANを挿入した後にDOM構造が分割されないようにすることです。これを達成できない場合は、元の状態にSPANタグを削除した後、どのようにDOM構造を再構築しますか？

//Insert the span 
var sel = restoreSelection(mootsOnPage[i].startXPath); 
var range = sel.getRangeAt(0).cloneRange(); 
var newNode = document.createElement('span'); 
newNode.className = 'highlightYellow'; 
range.surroundContents(newNode); 


//Original DOM structure 
<p>Hello there, how are you today</p> 


//What the DOM looks like after insertion of SPAN 
<p> 
    "Hello there, " 
    <span class="highlightYellow">how</span 
    " are you today" 
</p> 

Answer 1

これを使用してコンテンツをラップすることができます。

$(".highlightYellow").contents().unwrap(); 

デモ：http://jsfiddle.net/R4hfa/

Answer 2

<span>タグを挿入する動作は、DOMを変更します。それは、定義によって、surroundContents()に電話をしたときのやり方です。テキストノードの分割やスパンの新しい要素の追加を含むDOMを変更せずにスパンタグを追加することはできません。

さらに、選択されたテキストにテキストノード全体のみが含まれていて、テキストノードの途中で選択が開始/停止しない場合は、テキストノードを分割して適切な場所に配置する必要があります。後でスパンタグを削除すると、追加のテキストノードが作成されます。それは本当に問題ではありませんが、分割されたテキストノードを元の状態に戻さなければならないと考えるなら、私はいくつかのオプションを考えることができます：

1）スパンの前に元のparentNodeを保存しますそれに挿入されます。クローンを作成し、クローンにスパンを追加し、元のノードをクローンと置き換えて元のファイルを保存します。復元する場合は、元のものを元に戻し、複製したものを削除します。

2）スパンを削除するときに、隣接するテキストノードを検索して結合する関数を実行します。

3）これは、前に比べてテキストノードが増えている理由を説明しています。なぜなら、これはコードや表示に関係しないからです。

Answer 3

使用element.normalize()。

挿入したスパンを削除した後に、element.normalize()メソッドを使用して、スパンの挿入/削除の結果として作成された余分なテキストノードをマージすることができます。 normalize（）メソッドは、指定された要素とそのサブツリーのすべてを「正規化」形式にします（つまり、サブツリー内のテキストノードは空ではなく、隣接するテキストノードもありません）。 @ tcovoのコメントのおかげで見つかりました。

ノードを挿入して削除すると、要素内のテキストノードが分割されます。残念ながら、余分なノードが削除されると自動的には再マージされません。 "なぜ"この問題が起こっているかに関して人々の質問に答えるために、UIでのテキストハイライトを扱うときに問題が発生します。

Answer 4

normalize()ご注意ください！ <br/>のようなノードを削除し、テキストとその視覚化を変更します。

normalize()ですが、欠点があります。

ので<p>"this is an "<br/>"example"</p>はnormalize()が、<br/> Sを保つを使用する方法はあり<p>this is an example</p>

に変わるのでしょうか？