JSFiddle - React, Tailwind, and code Playground
HTML
Test * test
<div>Test * test</div>
<div>
<div>Test * test</div>
<div>Test * test * test</div>
</div>
<p>
Test * test
</p>
CSS
div {
border: 1px solid;
margin: 10px;
}
.red {
color: #f00;
}
JavaScript
var specialTags = ["script", "style"].join("|"),
re = new RegExp("^(?:" + specialTags + ")$", "i");
for (var els = document.getElementsByTagName("*"), i = els.length; i--;) {
var el = els[i],
tag = el.tagName;
if (re.test(tag))
continue;
for (var j = 0, childs = el.childNodes, lj = childs.length; j < lj; j++) {
var child = childs[j];
if (child.nodeType === 3 && child.nodeValue.indexOf("*") > -1) {
var segments = child.nodeValue.split("*");
for (var k = 0, lk = segments.length; k < lk; k++) {
el.insertBefore(document.createTextNode(segments[k]), child);
if (k < lk - 1) {
var span = document.createElement("span");
span.className = "red";
span.appendChild(document.createTextNode("*"));
el.insertBefore(span, child);
}
}
el.removeChild(child);
}
}
}