JSFiddle - React, Tailwind, and code Playground

by Xander Taylor

HTML

<button id='goButton'>Click me!</button>
<div id="myText">
    Here is a sentence full of ripe, delicious E's!
</div>

CSS

#myText {
    border:1px solid black;
    height:300px;
    padding:10px;
    text-align:center;
    font-weight:400;
    cursor:pointer;
}
magic {
    color:red;
}

JavaScript

function enchant() {
        //wrap all e's in <magic> tags
        var $node = $('#myText'); 
        var oldhtml= $node.html();
        var newhtml= oldhtml.replace(/(e)/gi,
                               "<magic>$1</magic>");
        $node.html(newhtml);
}

$("#goButton").click(enchant);