Traversieren/Modifizieren von TextNodes mit JQuery

Posted on by

In einer Webanwendung gibt es manchmal die Situation, dass man in bestehendem HTML-Code bestimmte Textinhalte modifizieren muss, unter Verwendung von zusätzlichem Markup. Z.B. Links klickbar machen, Highlighting von Suchergebnissen, etc. Folgendes Sample zeigt, wie man mit JQuery die Textnodes iterieren und dabei modifizieren kann:

// newElement enthält das zu modifizierende HTML. Dabei soll "Mein" durch "<b>Mein</b>" ersetzt
// werden, aber nur in Texten, nicht an sonstigen Stellen im HTML-Code
var newElement = $(['<ul><li>Erste <a href="http://www.Mein.de/">',
    'URL anders?</a> Zeile</li>',
    '<li>Meine zweite Zeile</li><li>Dein und Mein</li>',
    '<li>Nicht Mein sondern Main</li></ul>'].join(''));
  
// Diese Zeile selektiert/filtert die TextNodes in newElement:
var textnodes = $('*', newElement).contents().filter(function(){ return this.nodeType == 3 ; });
  
// Durchlaufen der TextNodes:
$.each(textnodes, function () {
  // mit this.nodeValue erhält man den Text-Inhalt des Text-Elements im DOM
  if (this.nodeValue.indexOf('Mein')>=0) {
    //Ersetzen des TextNodes durch ein HTML-Konstrukt
    $(this).replaceWith(this.nodeValue.replace('Mein', '<b>Mein</b>'));
  }
});
  
// Anzeige des Ergebnis
console.log(newElement.html());

This entry was posted in Uncategorized by admin. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*