Wrap Wörter innerhalb div mit span (zum Beispiel) -Tag, während der div hat HTML-Tags innerhalb

Question

Ich möchte jedes Wort mit Span-Tag innerhalb Absatz umhüllen. Ich habe es erfolgreich gemacht, wenn es keine HTML-Tags innerhalb des Absatzes gibt. Aber wenn der Absatz HTML-Tags enthält, wird es unordentlich.

Hier Beispiel, wenn keine HTML-Tags innerhalb des Absatzes:

$('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>

Aber wenn es HTML-Tags innerhalb des Absatzes, es Chaos wie folgt geht:

$('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>

Vielen Dank für DrunkenPoney für den Versuch, das zu implementieren. Er hat am meisten gemacht, aber es hat den inneren Spannweiteninhalt gebrochen.

möchte ich das Ergebnis so sein, wo jedes Wort im Browser erscheinen, mit <i class="woord"> folgend gewickelt werden:

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

Sein Code Ergebnis der ursprünglichen span Codestruktur wie folgt gebrochen hat:

<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

Es ist wahr, dass Sie alle Textknoten durchlaufen müssen. In jedem Textknoten können Sie einfach alle Wörter mit der gewünschten Zeichenfolge ersetzen. So ist es ziemlich klar über die Idee. Beachten Sie, dass das Suchen/Ersetzen mit Regex gegen HTML-Tags nicht empfohlen wird. Deshalb müssen wir uns mit rohen Textknoten beschäftigen.

Um auch dies bequem mit jQuery zu tun, verwenden wir die replaceWith-Methode, um den Textknoten durch alle zu ersetzen, die vom Regex-Ersatz zurückgegeben werden.

Hier ist die detaillierte Code:

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.