JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<div id="test">
    <h1>An article about John</h1>
    <p>The first paragraph is about John.</p>
    <p>The second paragraph contains a <a href="#">link to John's CV</a>.</p>
    <!-- this "John" WON'T be replaced -->
    <p>or see John's <a href="#">blog</a> - not replaced</p>
    <!-- this "John" WILL be replaced -->
    <p>or see <span>John's</span> <a href="#">blog</a> - this one is replaced!</p>
    <div class="comments">
        <h2>Comments to John's article</h2>
        <ul>
            <li>Some user asks John a question.</li>
            <li>John responds.</li>
        </ul>
    </div>
</div>

JavaScript

$('h1, h2, p, li').hover(function(){
    $(this).css('color','#f00');
}, function(){
    $(this).css('color','#000');
});

$('#test :not(:has(*))').text(function(i, v) {
    return v.replace(/John/g, 'Peter');    
});