JSFiddle - React, Tailwind, and code Playground
HTML
<p id='text'> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore eveniet veritatis voluptatum quod cum ipsa cumque et. Architecto eveniet debitis voluptate minus. Distinctio reprehenderit minus labore possimus ut voluptatum ex.</span>
<span>Fugit dolorem repudiandae perspiciatis accusantium repellat eum perferendis laboriosam velit nostrum eius suscipit quis quos distinctio sapiente non nam quaerat aspernatur voluptatibus ipsam sit beatae! Amet quia quisquam ex cupiditate?</span>
<span>Ipsam sunt repudiandae labore numquam facilis eveniet quibusdam optio ad maiores repellat voluptatibus doloribus pariatur necessitatibus illo cumque nemo harum voluptatem velit perferendis deleniti. Magni deserunt ut praesentium nostrum repellendus.</span>
<span>Excepturi amet commodi et impedit doloribus illo blanditiis aspernatur repudiandae optio sit ut aliquid veniam quaerat eaque inventore dolore labore nisi modi reiciendis rem esse aut quis perspiciatis totam vitae.</span>
<span>Possimus laborum ut dolore dolores ipsa. Doloremque cumque debitis ea perspiciatis quam architecto dolor reiciendis earum reprehenderit deleniti modi laboriosam soluta illum? Deleniti quibusdam iste amet unde quod nisi accusantium.</span>
<span>Ducimus quisquam deserunt cumque at deleniti consectetur odio distinctio sed ab fugit. Voluptatibus quam maxime quaerat quo incidunt sed nisi perspiciatis ducimus totam veritatis est excepturi consequatur non minima reiciendis!</span>
<span>Repellat deleniti voluptate nihil odit expedita inventore minus alias sapiente animi vero eaque assumenda doloribus quia. Asperiores laudantium est mollitia nesciunt voluptatem excepturi a culpa repellat incidunt delectus vitae quibusdam.</span>
<span>Tempora ut nobis neque velit corporis quo molestias. Molestias quibusdam natus tempora voluptatem dolore enim ad corrupti placeat alias laboriosam architecto illum ipsa et! Deserunt officiis voluptatem velit cumque fuga?</span>
<span>Est sapiente...
CSS
.marked {
background-color: yellow;
}
JavaScript
var words = ['dolor', 'sit', 'odio'];
var ele = document.getElementById('text'),
html = ele.innerHTML;
asycnIterator(words,
function (word) {
var reg = new RegExp('\\b' + word + '\\b', 'ig');
html = html.replace(reg, '<span class="marked">' + word + '</span>');
}, function () {
ele.innerHTML = html;
});
function asycnIterator(arr, func, cb) {
var i = 0;
nextCall();
function nextCall() {
func(arr[i++]);
if (i >= arr.length) {
if (cb) cb();
return;
}
setTimeout(nextCall, 1);
}
}