La meilleure façon de prendre du texte dans un élément HTML qui est dans le nœud parent ne

Question

j'ai, par exemple, le balisage comme celui-ci

<div id="content"> 
    <p>Here is some wonderful text, and here is a <a href="#">link</a>. All links should have a `href` attribute.</p> 
</div> 

Maintenant, je veux être en mesure d'effectuer certains regex remplacer le texte à l'intérieur de l'élément p, mais pas dans n'importe quel HTML, c'est-à-dire être capable de faire correspondre le href à l'intérieur des guillemets, mais pas à l'intérieur de l'élément d'ancrage. J'ai pensé à regex, mais comme le consensus général est, je ne devrais pas les utiliser pour analyser HTML.

Ma méthode actuelle de le faire est comme ceci: J'ai un tas de mots dans un tableau, et je suis mise en boucle à travers eux et faire un objet de données comme ceci:

termsData[term] = { 
     regex: new RegExp('(\\b' + term + '\\b)', 'gmi'), 
     replaceWith: '<span>{TERM}</span>' 
    }; 

Je puis boucle à travers elle à nouveau, ce qui rend les remplacements comme ceci:

var html = obj.html(); 

$.each(terms, function(i, term) { 


    // Replace each word in the HTML with the span 
    html = html.replace(termsData[term].regex, termsData[term].replaceWith.replace(/{TERM}/, '$1')); 


}); 

obj.html(html); 

maintenant, je fait beaucoup de cette dernière nuit à une heure indue, et copier et le coller dans semble ici pour faire croire que je factoriser une partie de cela.

Donc, de votre part, vous devriez pouvoir dire, je veux être en mesure de remplacer le texte brut, mais pas n'importe quoi dans une balise HTML.

Quelle serait la meilleure façon de le faire?

Remarque: Le code source provient de here si vous souhaitez un meilleur look.

Answer 1

Vous avez raison de ne pas vouloir traiter le HTML avec regex. C'est aussi une mauvaise nouvelle d'attribuer d'énormes blocs de .html(); Outre les inconvénients de la sérialisation et de la réparation d'une grande quantité de code HTML, vous perdrez également des données non sérialisables comme des écouteurs d'événements, des données de formulaire et des propriétés/références JS.

Voir la fonction findText dans this answer et appeler quelque chose comme (en supposant obj est un wrapper jQuery sur votre nœud tout en haut de rechercher dans):

findText(obj[0], /\b(term1|term2|term3)\b/g, function(node, match) { 
    var span= document.createElement('span'); 
    node.splitText(match.index+match[0].length); 
    span.appendChild(node.splitText(match.index)); 
    node.parentNode.insertBefore(span, node.nextSibling); 
});