JSFiddle - React, Tailwind, and code Playground

by naryad

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere ornare risus, eu vehicula urna ultricies at. Etiam luctus sapien id tortor pellentesque rhoncus. Donec viverra tellus at lacus blandit varius hendrerit urna condimentum. In urna turpis, elementum in mollis sit amet, mollis sit amet tortor. Mauris blandit volutpat magna, at lobortis nisi iaculis ac. Pellentesque ut urna a augue fringilla dapibus. Phasellus commodo, ipsum a consequat feugiat, velit massa elementum dolor, vitae sollicitudin sem leo ac eros. Suspendisse ornare lorem non eros fermentum et laoreet neque blandit. Mauris ultricies pretium magna ac mollis. Etiam eget laoreet nisi. Nam ullamcorper posuere quam, sit amet porta lacus dictum vitae.</p>
<form id="find"><input id="fText" /><button>Find!</button></form>
<form id="replace"><input id="rText" /><button>Replace!</button></form>
<form id="fnext"><button id="next">Next!</button></form><div id="fade" style="display:none;">hi</div>

CSS

body, h1, h2, p, ul, form, img {
    padding: 0;
    border: none;
    margin: 0;
    list-style: none;
}
body {
    font-family: Arial, Sans-serif;
    font-size: 0.8em;
    padding: 30px;
}
h1 {
    padding: 0 0 10px 0;
}
p, ul {
    padding: 1em 0;
}

JavaScript

function findAndReplace(searchText, replacement, searchNode) {
    if (!searchText || typeof replacement === 'undefined') {
        alert("Please Enter Some Text Into the Field");
        return;
    }
    var regex = typeof searchText === 'string' ? new RegExp(searchText, 'g') : searchText,
        childNodes = (searchNode || document.body).childNodes,
        cnLength = childNodes.length,
        excludes = 'html,head,style,title,link,meta,script,object,iframe';
    while (cnLength--) {
        var currentNode = childNodes[cnLength];
        if (currentNode.nodeType === 1 && (excludes + ',').indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) {
            arguments.callee(searchText, replacement, currentNode);
        }
        if (currentNode.nodeType !== 3 || !regex.test(currentNode.data)) {
            continue;
        }
        var parent = currentNode.parentNode,
            frag = (function() {
                var html = currentNode.data.replace(regex, replacement),
                    wrap = document.createElement('div'),
                    frag = document.createDocumentFragment();
                wrap.innerHTML = html;
                while (wrap.firstChild) {
                    frag.appendChild(wrap.firstChild);
                }
                return frag;
            })();
        parent.insertBefore(frag, currentNode);
        parent.removeChild(currentNode);
    }
}
document.getElementById('find').onsubmit = function() {
    findAndReplace(document.getElementById('fText').value, function(hi) {
        var n = Math.floor(Math.random() * 9999999999);
        var s = Math.floor(Math.random() * 30);

        $('#fade').after('<span id="show' + n + '" style="display:none;"></span>');
        $('#show' + n + '').html(hi);
        $('body').prepend("<script type='text/javascript'>$('#highlight" + n + "').click(function(){$('#fade').show();});$('#highlight" + n + "').mouseover(function(){$('#highlight" + n + "').css('background',...