JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    	<h1>jQuery Highlight Plugin</h1>

    <p>some additional tweaks =)</p>
    	<h2 id="how">Here we go with our simple example</h2>

    <p class="example">Who is the quick brown fox?<p/>
    <ol class="javascript runnable code">
        <li><code>$(".example").highlight("brown");</code></li>
    </ol>
    <p>You can now unhighlighyt it,</p>
    <ol class="javascript runnable code">
         <li><code>$(".example").unhighlight();</code></li>
    </ol>
    <p>but it got saved into an array for future reuse, so if you highlight a new word it both will be highlighted.<p/>
    <ol class="javascript runnable code">
         <li><code>$(".example").highlight(["quick","fox"]);</code></li>
    </ol>
    <p>so, I added an second argument for the unhighlight function, that empties the array of previous selections<p/>
    <ol class="javascript runnable code">
         <li><code>$(".example").unhighlight([],"clearprev");</code></li>
    </ol>
    <p>We can merge the neighboring highlighted words</p>
    <ol class="javascript runnable code">
         <li><code>mergenode($(".example"));</code></li>
    </ol>
    <p>And now some <code>OWERLAPPING</code> strings and all above combined =),yay!</p>
    <p class="example">Who is the quick brown fox?<p/>
    <ol class="javascript runnable code">
         <li><code>$(".example").unhighlight().highlight("Who is the");</code></li>
    </ol>
    <p>and</p>
    <ol class="javascript runnable code">
         <li><code>$(".example").unhighlight().highlight("the quick");</code></li>
    </ol>
    <p>and combined with the <code>mergenode</code></p>
    <ol class="javascript runnable code">
         <li><code>$(".example").unhighlight().highlight(["the quick","quick brown","fox"]);</code></li>
         <li><code>mergenode($(".example"));</code></li>
    </ol>
</body>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
/* remember to define focus styles! */
 :focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
 ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    width: 600px;
    margin: 1em auto;
    font-family: Verdana, Arial, sans-serif;
    line-height: 1.4;
}
h1, h2, h3, h4 {
    font-family: Futura, "Century Gothic", "URW Gothic L", Helvetica, sans-serif;
    font-weight: normal;
    border-bottom: 1px solid #777777;
}
h2, h3, h4, p {
    margin-top: 1em;
}
ul, ol {
    margin-top: 0.5em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1.1em;
}
a {
    color: #224466;
    text-decoration: none;
    border-bottom: 1px solid;
}
h1 a, h2 a, h3 a, h4 a {
    border-bottom: none;
}
a:visited {
    color: #555666;
}
a:hover, a:focus {
    color: #224466;
    background-color: #E4F2FF;
    ;
    /* #DDEEFF; */
}
a:active {
    color: #224466;
}
.highlight {
    background-color: #FFFF88;
}
.error {
    color: red;
    border-bottom: 1px dashed red;
}
code {
    background-color: #EEEEEE;
}
ol.code code {
    white-space: pre;
    background-color: transparent;
}
ol.code {
   ...

JavaScript

//I was lazy and just used the highlighter webpage, as it had all the convinient buttons =) But i altered it for my simple example.
//So most of the credit goes to:

/*
 * jQuery Highlight plugin
 *
 * Based on highlight v3 by Johann Burkard
 */

//this is their script for the buttons
$(function () {
    $(".runnable")
        .attr({
        title: "Click to run this script"
    })
        .css({
        cursor: "pointer"
    })
        .click(function () {
        // here be eval!
        eval($(this).text());
    });
});

//here is the script that I quickly altered to illustrate my answer on stackoverflow
//the illustration is only made to work with the basic element span and class .highlight

var selected1 = [], //to keep the previously selected strings
    toselect = []; //keeps overlapping strings


//function to save selected strings to selected1
function prevselect(){
    selected1 = [];
    $(".highlight").each(function(){selected1.push(this.textContent.replace(/\s+/g," "))});
    selected1 = $.grep(selected1, function (a, b) {
        return $.inArray(a, selected1) === b;
    });
}

//function that combines overlaping strings
function overlap(a, b) {
    var l = b.length,
        m = a.length;
    for (var j = 1; j < l; j++) {
        if (a.indexOf(b.substr(l - j)) === 0) {
            toselect.push(b.concat(a.substr(j)));
        } else if (a.substr(m - j).indexOf(b.substr(0, j)) === 0) {
            toselect.push(a.concat(b.substr(j)));
        }
    }
}

//compares each element of an array to another element of the array
function overdiag(arr) {
    toselect = []; //empties to select
    $.each(arr, function (i) {
        $.each(arr.slice(i + 1), function (i, v) {
            overlap(arr[i], v);
        });
    });
}

//merges bordering highlight tags
function mergenode(node) {
    var parent1 = node.contents();
    parent1.each(function (i) {
        if (i > 0 && this.nodeType !== 1 && //if text node
        this.data.search(/^\s*$/g) === 0 &&...