JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<div class="container">
    <span>This is a span element</span>
    <span>This is a span element</span>
    <span>This is a span element</span>
    <span>This is a span element</span>
</div>
<button class="undo">UNDO</button><button class="do">DO</button>

CSS

.marked {
    color:blue;
    font-weight:bolder;
     background: yellow;
}

JavaScript

var word = 'span';
var re = new RegExp('[^<\\/](' + word + ')', 'g');
$('button.do').on( 'click', function() {
    $('.container').each(function() {
        $(this).html( $(this).html().replace( re, ' <span class="marked">$1</span>' ) );
    });
});
$('button.undo').on( 'click', function() {
    $('.container').find( 'span.marked' ).each(function() {
        $(this).replaceWith( word );
    });
});