title: How to highlight text by using regex
body: <p>I'm trying writing a script to help highlight when match with regex. Below is my example that what I do now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var text = "SOMETHING ~WEIRDs~ AND Not WEIRD";
  var regexp = /\b(WEIRD)\b/
  var matches = text.match(regexp);
  
  for (i = 0; i &lt; matches.length; i++) {
    var replace_all = RegExp(matches[i] + "(?![^&lt;]*&gt;|[^&lt;&gt;]*&lt;\/)", "ig");
    text = text.replace(eval(replace_all), "&lt;span style='background-  color:yellow'&gt;" + matches[i] + "&lt;/span&gt;");
  }
  console.log(text);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The output of the code above is </p>
  
  <pre><code>SOMETHING ~&lt;span style='background-  color:yellow'&gt;WEIRD&lt;/span&gt;s~ AND Not &lt;span style='background-  color:yellow'&gt;WEIRD&lt;/span&gt;
  </code></pre>
  
  <p>The output I want is</p>
  
  <pre><code>SOMETHING ~WEIRDs~ AND Not &lt;span style='background-  color:yellow'&gt;WEIRD&lt;/span&gt;
  </code></pre>
  
  <p>I would like to know is that anyway to write a regex contains regex and words provided? Or have any other method can solve this incorrect replace issue.</p>