Как использовать jQuery: replace() для разных входов

Question

У меня есть следующий HTML-контент.

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

Я хочу изменить цвет 'импорта' и 'библиотек' и '<'. '>'.

Я пытаюсь использовать JQuery: содержит() ..

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

В соответствии с выше коде, я могу изменить цвет «импорта» ключевого слова. Но как я могу изменить цвет других требуемых ключевых слов?

Answer 1

Вы можете настроить таргетинг на несколько селекторов, разделенных запятыми, а затем использовать регулярное выражение и шаблон для их замены:

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>