JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<h1 class="title">George quietely laughed & jumped!</h1>
<h1>Realy quiet</h1>

<br/>
<br/>

<h2 class="title">abcdefghijklmnopqrstuvwxyz</h2>
<h2 class="title">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>

<h2 class="title"> { ( [ | _ ç @ ) ] } , ; / § µ / </h2>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
body{
    font-family: 'Droid Serif', serif;
}
h1{
    font-size:48px;
    font-weight:normal;
}
h2{
    font-weight:normal;
}
.underline {
    text-decoration:underline;
}

JavaScript

$('.title').each(function () {
    var s = '<span class="underline">',
        decoded;
    $(this).prop('innerHTML', function (_, html) {
        s += html.replace(/&amp;/g, '&').replace(/(g|j|p|q|y|Q|@|{|_|\(|\)|\[|\||\]|}|;|,|§|µ|ç|\/)/g, '</span>$1<span class="underline">');
        s += '</span>'
        $(this).html(s);
    });
});