JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pge">
    <p>
        <input type "text" id="mmt" value="dolor" />
        <input type="button" value="Rechercher" id="search" />
    </p>
    <div id="mtx">
        <p>Vivamus Nam accumsan id orci at rhoncus egestas feugiat dolor Nullam. Sapien sagittis convallis dolor condimentum sapien mauris eu congue pretium Morbi. Curabitur et elit at justo sapien Pellentesque lacinia Morbi netus adipiscing. Elit tristique dui libero libero et libero gravida nibh leo pellentesque. Facilisis Curabitur in purus odio laoreet penatibus cursus.</p>
        <p>Id urna sem Curabitur urna Integer ut Praesent diam Aliquam massa. Risus vel habitasse urna Cras et elit venenatis Suspendisse libero Phasellus. Est id ac sed nibh wisi vitae fringilla justo feugiat Proin. Lacinia et ut quis sit. Dolor cursus nisl facilisi at senectus. Dui id eu pede vel massa Nam mauris volutpat tempus pretium. Tristique Pellentesque mattis tincidunt.</p>
        <p>Leo euismod consequat eget justo sollicitudin id tristique justo id tempus. Massa purus adipiscing at porttitor porta mauris Cum ultrices Nam enim. Maecenas Nullam vel Sed porta consectetuer elit dolor ligula quis ligula. Nulla vel at mus nunc Mauris molestie nunc elit tincidunt hendrerit. Et est Phasellus Nulla Sed massa nisl dui est pretium tincidunt. Wisi urna arcu.</p>
    </div>

CSS

.surlignage {
    background-color: yellow;
}

JavaScript

document.getElementById('search').addEventListener('click', srl);

function srl() {
     t = document.getElementById('mtx');
     c = t.innerHTML;
     m = document.getElementById('mmt').value;
    
    
    
    c = c.replace(/<\/?span[^>]*>/ig, ''); // pas de surlignage
    if (m) {
        r = new RegExp("\\b(" + m + ")\\b", "gi");
        // surlignage des mots \b une coupuere de mot
         c = c.replace(r, '<span class="surlignage">$1</span>');
    }
    t.innerHTML = c;
}