JSFiddle - React, Tailwind, and code Playground

HTML

<p> wrap*
    <p>Wrap * <span data-my="w*orld" class="bla*h">hi</span></p>
    <p>Do not Wrap</p>
</p>
<div>do not wrap</div>
<div>Wrap *</div>

CSS

.red
{
    color:red;
}
span[data-my="w*orld"] {
    
    color: blue;
}

JavaScript

var text = $("body").find(":contains(*)").contents().filter(function() {
    //Don't include css or script tags, all other text nodes are fine.
  return this.nodeType == 3
      && ($(this).parent().get(0).tagName.toUpperCase() !== "SCRIPT") 
      && ($(this).parent().get(0).tagName.toUpperCase() !== "STYLE");
}).replaceWith(function() {
   return this.textContent.replace(/\*/g, "<span class=\"red\">*</span>");
});