JSFiddle - React, Tailwind, and code Playground

by ksevksev

HTML

<div id="helpAuthInsertElemView" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><div id="hf_TestDummy1_view">
    <table>
    <tbody>
    <tr>
        <td width="100%" style="font-weight:bold;">TestDummy1</td>
        <td class="nowrap">
            <input disabled="disabled" id="insertElementDisplayModeCheckbox" name="displayModeCheckbox" class="displayModeCheckbox ieField" type="checkbox" value="wide">
            <label for="insertElementDisplayModeCheckbox">Requires a wide display.</label>
        </td>
    </tr>
    </tbody>
    </table>
    <div class="editable" style="padding-top:5px; border-top:black solid 1px;">This is simply a dummy insert element for testing purposes. It isn't referenced so it shouldn't pose problems. The following is a test sentence for find and replace. SEARCHING for aaaaaaa AAAAAAA AAaaAAaaAA.&#60;img class="helpInlineimage" src="/[AppDir]/images/addline_off.gif" alt="Add row button."&#62;</div>
</div>

CSS

.found
{
    background-color: yellow;
}

JavaScript

var escapeHtml = function (input)
{
    var out = input.replace(/&/g, "&#38;");
    out = out.replace(/</g, "&#60;");
    out = out.replace(/>/g, "&#62;");
    return out;
};

var regExpSpecialChars = "\\^$.*+?=!:|/()[]{}";
var escapeForRegExp = function (search)
{
    console.log('before escape: search=['+search+']');
    for (var i = 0; i < regExpSpecialChars.length; i++)
    {
        var special = regExpSpecialChars.charAt(i);
        if (search.indexOf(special) != -1)
        {
            var pattern = "\\" + special;
            var regExp = new RegExp(pattern, "g");
            search = search.replace(regExp, pattern);
        }
    }
    //search = helpAuth.escapeHtml(search);
    console.log('after escape: search=['+search+']');
    return search;
};

var highlightMatches = function (jqSelector, find, replace, caseSensitive)
{
    console.log("\n\n*** Gonna Highlight Matches ***\n\n");
    var containers = $(jqSelector);
    var atribs = "g";
    if (!caseSensitive)
    {
        atribs += "i";
    }
    var pattern = escapeForRegExp(find);
    var regExp = new RegExp(pattern, atribs);
    containers.find(".editable").each(function(i, el)
    {
        var elem = $(el);
        console.log(elem.text());
        var text = elem.text();
        var matches = text.match(regExp);
        var pieces = text.split(regExp);
        var newHtml = "";
        for (var i = 0; i < pieces.length; i++)
        {
            newHtml += escapeHtml(pieces[i]);
            newHtml += '<span class="found">'
            newHtml += escapeHtml(matches[i]);
            newHtml += '</span><sup>' + i + '</sup>';
        }
        elem.html(newHtml);
        console.log(elem.text());
    });
};

highlightMatches("#helpAuthInsertElemView", "AA", "CCC", false);
console.log('hi');