JSFiddle - React, Tailwind, and code Playground

by Anirudh Tewathia

HTML

<table class="projects-list">
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quis!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium suscipit?</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quibusdam.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure recusandae!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora eum.</td>
    </tr>
</table>
<input type="text" class="inp" value="it">
<button class="btn">Highlight</button>

CSS

td {
    border: 1px solid black;
}
.matching {
    color: red;
    text-decoration: underline;
}

JavaScript

function highlightOnly(text) {
    $('.projects-list td').each(function (i, e) {

        var $e = $(e);
        $e.html($(e).html().split(text).join('<span class="matching">' + text + '</span>'));
    })
}
$('.btn').on('click', function () {
    $('.matching').replaceWith(function () {
        return this.innerText;
    });
    highlightOnly($('.inp').val());
});