JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<div id="content"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, modi, officia dolorem exercitationem maxime praesentium soluta similique dolorum eius dolores qui ipsa veniam voluptates excepturi a at fugit eveniet omnis?</div>
<div>Similique, earum, architecto placeat sapiente reiciendis mollitia suscipit obcaecati illo tenetur quisquam aliquam eveniet porro nemo error officia harum asperiores enim ullam blanditiis nobis voluptas esse minus eum. Accusamus, consequuntur?</div>
<div>Nulla, magnam saepe numquam mollitia vitae veniam accusamus doloremque dicta culpa sequi. Provident, iste, dolore, dolores, consequuntur optio nostrum eius voluptate fugiat delectus temporibus cupiditate itaque in quos suscipit iure!</div>
<div>Quod, modi, magnam, provident ex quisquam sequi aperiam iste quo molestias veniam quia totam quaerat repudiandae molestiae voluptate quas ad quam eius natus nemo quae vero fugit voluptates cum voluptatum.</div>
<div>Veniam voluptates possimus atque consequatur. Voluptates, praesentium, amet quisquam aliquam nihil at ratione consequatur vel fuga laboriosam impedit temporibus expedita consectetur quis saepe harum alias sapiente aliquid magni earum autem.</div>
<div>Molestiae, unde corporis consequatur repellendus accusamus quo hic in rem labore odio. Est minima numquam quos sunt repellendus quaerat. Suscipit, at beatae sed sequi aliquam reiciendis iure officia obcaecati voluptates.</div>
<div>Fuga, incidunt, eaque consequatur deserunt velit doloribus obcaecati adipisci veritatis facere voluptatum molestias vitae iusto. Unde, adipisci, odio magni asperiores impedit quidem maxime obcaecati nobis inventore id sed labore nostrum.</div>
<div>Officia, eaque ipsa similique assumenda laudantium hic ab natus harum vitae dicta modi nihil possimus eligendi voluptates deserunt in unde error aperiam maxime mollitia quam tenetur facere aliquam blanditiis magnam.</div>
<div>Recusandae, deserunt, non, rerum veritatis dolor numquam...

CSS

#content {
    height:250px;
    overflow-y:scroll;
}

JavaScript

document.getElementById('search').onclick = function (event) {
    event.preventDefault();
    var word = document.getElementById('selector').value;
    var content = document.getElementById('content');
    
    if (content.innerHTML.indexOf(word)>0)
    {
        content.innerHTML.substring(content.innerHTML.indexOf(word),word.length).replace(word, "<mark>" + word + "</mark>");
    }
};