title: How can I select and style an asterisk in a string?
body: <p>I would need to set a specific color to a special character. </p>
  
  <p>Specifically, I would like to set the asterisk <code>*</code> in a <code>&lt;div&gt;</code> to color <code>red</code>, without intervening directly in the <code>&lt;div&gt;</code>.</p>
  
  <p>Online I found this project, which actually goes to set a background color to a character, however if I adapt the script to the * symbol it doesn't work.</p>
  
  <p>Example output: </p>
  
  <p><a href="https://i.stack.imgur.com/AuWBb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AuWBb.png" alt="Desired result"></a></p>
  
  <pre><code>$("p").highlight("*","highlight");
  </code></pre>
  
  <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>jQuery.fn.highlight = function (str, className) {    
      var regex = new RegExp(str, "gi");
  
      return this.each(function () {
          this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "&lt;span class=\"" + className + "\"&gt;" + matched + "&lt;/span&gt;";});
      });
  };
  
  $("p").highlight("*","highlight");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>span.highlight{
     background:#F60;
      padding:5px;
      display:inline-block;
      color:#FFF;
  }
  
  p{
     font-family:Verdana;   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
      Let's *go Zapata let's do it for the revolution, Zapatistas*!!!   
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If instead of <code>Z</code> I put the asterisk <code>*</code> the script doesn't work. Could anyone assist?</p>