JSFiddle - React, Tailwind, and code Playground

by vendruscolo

HTML

<p>Styling the &trade;</p>

<p>Styling the &copy;</p>

<p>Giving some love to a &hearts;</p>

CSS

p {
    font-family: Helvetica, Arial, sans-serif;
    margin-bottom: 20px; }

.highlight.trade {
    font-family: Georgia, serif;
    color: #999999; }

.highlight.copyright { 
    font-family: Georgia, serif;
    color: #999999; }

.highlight.heart {
    color: pink; }

JavaScript

jQuery.fn.highlight = function(what, withClass) {
    this.find(':contains(' + what + ')').each(function(index, val) {
        console.log(val);
        val.innerHTML = val.innerHTML.replace(new RegExp(what, 'g'), '<span class="highlight ' + withClass + '">' + what + '</span>');
    });
}


$(function() {
    $('body').highlight("™", "trade");
    $('body').highlight("©", "copyright");
    $('body').highlight("♥", "heart");
    $('body').highlight("&", "ampersand");
});