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>
<button class="btn">Highlight 'it'</button>

CSS

.matching {
    color: red;
}

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 () {
    highlightOnly('it');
});