JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<input type="text" id="search" />                                                                                          
<p>Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Suspendisse non nisl sit amet velit hendrerit rutrum. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Morbi mattis ullamcorper velit. Morbi nec metus.</p>
<p>Curabitur suscipit suscipit tellus. Aenean viverra rhoncus pede. Pellentesque auctor neque nec urna. Vestibulum volutpat pretium libero. Ut tincidunt tincidunt erat.</p>
<p>Aenean ut eros et nisl sagittis vestibulum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Etiam rhoncus. Phasellus accumsan cursus velit. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.</p>
<p>Donec posuere vulputate arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Phasellus viverra nulla ut metus varius laoreet. Fusce egestas elit eget lorem.</p>
<p>Pellentesque dapibus hendrerit tortor. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Donec posuere vulputate arcu. Nam ipsum risus, rutrum vitae, v1estibulum eu, molestie vel, lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu ligula. Sed libero. Nam pretium turpis et arcu. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.</p>

CSS

.search-highlighted {
    background-color: #cfa6dd;
}

body{
    font-family: monospace;
    color: #333;
}

JavaScript

/**
 * HIGHLIGHT SEARCH
 */

var hs = {
    lastSelector: null, // Store selector for reflow
    elems: null, // Element storage
    /**
     * Initialize and gather elements
     */
    init: function (selector) {
        hs.lastSelector = selector; // Store selector
        hs.elems = document.querySelectorAll(selector); // Gather elements
    },
    /**
     * Build RegEx and wrap matches
     */
    highlight: function (str) {
        var pattern = new RegExp('(' + hs.escapeRegex(str).replace(' ', '\\s') + ')', 'gi'); // Build regex
        for (var i = 0; i < hs.elems.length; i++) {
            hs.elems[i].innerHTML = hs.elems[i].innerHTML.replace(pattern, '<span class="search-highlighted">$1</span>'); // Wrap matches
        }
    },
    /**
     * Remove span wraps from elems
     */
    clearHighlights: function () {
        for (var i = 0; i < hs.elems.length; i++) {
            hs.elems[i].innerHTML = hs.elems[i].innerHTML.replace(/<span class="search-highlighted">([^<]*)<\/span>/ig, '$1'); // Replace wraps with their content
        }
    },
    /**
     * Hides unmatched wraps
     */
    hideNoMatch: function(){
        for (var i = 0; i < hs.elems.length; i++) {
            // Locate matches inside
            if(hs.elems[i].querySelectorAll('span.search-highlighted').length > 0){
                hs.elems[i].style.display = 'block';
            }else{
                hs.elems[i].style.display = 'none';
            }
        }
    },
    /**
     * Escape regex characters in a string
     */
    escapeRegex: function (str) {
        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    },
    /**
     * Quick reinitialization with last used selector
     */
    reflow: function () {
        hs.init(hs.lastSelector);
    }
}


hs.init('p'); // Initialize
// Add input event
var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', function () {
    hs.clearHighlights(); // Reset search
   ...