Comment utiliser jQuery: replace() pour différentes entrées

Question

J'ai le contenu HTML suivant.

<pre class="preContent"> Just import all required libraries into the application. Make sure to use <String> tags. </pre> 

Je veux changer la couleur de 'importation' et 'bibliothèques' et '<'. '>'.

Je suis en train d'utiliser jQuery: contient() ..

$(".preContent:contains(import)").each(function() { 
     var regex = new RegExp('import','gi'); 
     $(this).html($(this).html().replace(regex, "<span class='red'>import</span>")); 
}); 

Conformément au code ci-dessus, je suis en mesure de changer la couleur du mot-clé 'import'. Mais comment puis-je changer la couleur des autres mots-clés requis?

Answer 1

Vous pouvez cibler plusieurs sélecteurs séparés par des virgules, puis utiliser une expression régulière et un modèle pour les remplacer:

var regex = /(import|libraries)/gi; 
 

 
$('.preContent:contains(import), .preContent:contains(libraries)').each(function() { 
 
    $(this).html($(this).html().replace(regex, "<span class='red'>$1</span>")); 
 
});

.red { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre class="preContent">Just import all required libraries into the application. Make sure to use &lt;String&gt; tags.</pre>