JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<div id="in">Test Input STRING INPUT sTRing</div>
<div id="out"></div>

CSS

.found {
}

.found > li {
    padding-left: 115px;
    position: relative;
}

.found label {
    left: 0;
    position: absolute;
    top: 0;
}

JavaScript

$("#out").append($("#in").text().replace(/Input (Str)(ing)/ig, function(stringFound, s1, s2, pos, stringSearched) {
    var $found = $('<div><ul class="found">'+
                   '<li class="string-found"><label>String Found:</label> </li>'+
                   '<li class="seg1"><label>1st Segment:</label> </li>'+
                   '<li class="seg2"><label>2nd Segment:</label> </li>'+
                   '<li class="position"><label>Position:</label> </li>'+
                   '<li class="string-searched"><label>String Searched:</label> </li>'+
                   '</ul></div>');
    
    $found.find(".string-found").append(stringFound);
    $found.find(".seg1").append(s1);
    $found.find(".seg2").append(s2);
    $found.find(".position").append(pos);
    $found.find(".string-searched").append(stringSearched);
    $found.toString = function() {
        return this.html();
    };
    return $found;
}));