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 {
}

JavaScript

var $targets = null;

function ripen($obj) {
    $obj.animate({color:'#ff0000'},3000);
}

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);
    
        $targets = $('magic');//target all <magic>
        ripen($targets);
}

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