用span（例如）標籤包裝div中的單詞，而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標籤進行搜索/替換。這就是爲什麼我們需要處理原始文本節點。

此外，爲了方便地使用jQuery來做到這一點，我們使用replaceWith方法就地替換了從正則表達式替換返回的所有文本節點。

下面是詳細的代碼：

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。