div内の単語をspanタグ（たとえば）で囲み、div内にHTMLタグがある

Question

段落内のspanタグで各単語を折り返したいと思います。私は段落の中にHTMLタグがないときにうまくいきました。しかし、段落の内部にHTMLタグがあると、それは混乱するでしょう。

ここでは例何のHTMLタグが段落内ではない：

$('div').html(function(i, v) { 
 
    return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    11111 22222 33333 44444 
 
</div>

しかし、段落内のHTMLタグがある場合、それは次のように混乱を起こっ：

$('div').html(function(i, v) { 
 
    return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    11111 <span>22222 <small>33333</small></span> 44444 
 
</div>

を

ありがとうDrunkenPoneyこれを実装しようとしています。彼は一番の努力をしましたが、それは内のスパンの内容を壊しました。

私はブラウザに表示されるすべての単語は、次のよう<i class="woord">でラップするようにどこ結果はこのようになりたい：

<div> 
    <i>June</i> <span><i>10</i> <i>sssssss</i></span> <i>ggdgfdf</i> 
</div> 

彼のコードの結果は以下の通り元spanコード構造が壊れています

<div> 
    <i class="woord">11111</i> <i class="woord"><span>22222</span></i> <i class="woord"><small>33333</small></i> <i class="woord">44444</i> 
</div> 

Answer 1

すべてのテキストノードをトラバースする必要があります。各テキストノードでは、すべての単語を目的の文字列に置き換えることができます。 このアイディアについてはっきりしています。 HTMLタグに対してRegexを使用して検索/置換することはお勧めしません。そのため、生のテキストノードに対処する必要があります。

また、jQueryを使用して便利にこれを行うために、replaceWithメソッドを使用して、テキストノードをRegex置換から返されたすべての場所に置き換えます。

var wrapHtml = function(textNode){ 
       return $(textNode).replaceWith(
            textNode.nodeValue 
              .replace(/\w+/g,"<i class='woord'>$&</i>")); 
       }; 

$("div").contents().each(function(i,e){ 
if(e.nodeType == 1){  
     var elems = []; 
     elems.push(e); 
     while(elems.length > 0){ 
     var ce = elems.pop(); 
     if(ce.nodeType == 1) { 
      $(ce).contents().each(function(j,o){ 
       if(o.nodeType == 1) { 
        elems.push(o); 
        } else { 
        wrapHtml(o); 
        } 
       }); 
     } else { 
       wrapHtml(ce); 
     } 
     }  
    } else { 
     wrapHtml(e); 
    } 
}); 

Demo：

は、ここで詳細なコードです。