JQuery: Ajouter un style aux correspondances Regex

Question

Je souhaite afficher le code HTML comme texte sur mon site Web. Je exemple suivant de texte dans mon html:

<div id="test"> 
    &lt;p&gt;Hello&lt;/p&gt; <br /> 
    &lt;p&gt;Hello2&lt;/p&gt; 
</div> 

qui montre:

<p>Hello</p> 
<p>Hello2</p> 

sur mon site.

Maintenant je veux changer la couleur des étiquettes. J'ai trouvé l'idée sur Internet de remplacer un RegExp par le même texte enveloppé dans un span avec une classe pour changer le style de cette durée.

J'ai essayé suivante JQuery:

$(document).ready(function() 
{ 
    var oldHtml = $("#test").html(); 
    var newHtml = oldHtml.replace(new RegExp("(&lt;){1}.*(&gt){1};","g"), "<span class='highlight'>$1</span>"); 
    $("#test").html(newHtml); 
}); 

et a obtenu les éléments suivants:

< 
< 

Qu'est-ce que je fais mal?

Answer 1

Les groupes de capture sont au mauvais endroit. Vous capturez le support d'ouverture en $1 et le support de fermeture en $2, que vous n'utilisez jamais.

(<){1}.*(&gt){1}; 

Vous pouvez aussi ne pas besoin du quantificateur.

<(.*?)> 

Avec ce motif et la même substitution, cela devrait fonctionner. Le quantificateur *? ne le rend pas gourmand, donc il s'arrête le plus tôt possible avec le match pour n'importe quoi.

Notez que l'analyse du code HTML avec regex est une mauvaise idée. Même si certaines parties du HTML sont échappées, c'est toujours un langage difficile qui n'est pas régulier. Ça ne va finalement pas marcher. Utilisez un analyseur à la place. Ou pour votre utilisation, utilisez simplement l'une des nombreuses bibliothèques de coloration syntaxique faciles à trouver et à utiliser.