JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<input type="text" id="search" />
<div id="container"> <span id="sectionOne">This is my first section</span>  <span id="sectionTwo">This is my second section</span>

</div>
<div id="output"></div>

JavaScript

$('#search').keyup(function () {
    var self = $(this);
    var src_str = $("#container").html();
    var term = $('#search').val();
    term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
    var pattern = new RegExp("(" + term + ")", "gi");

    src_str = src_str.replace(pattern, "<mark>$1</mark>");
    src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

    $("#output").html(src_str);
});