JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac massa  lectus, sed pretium nunc. Curabitur scelerisque pulvinar ipsum a cursus.  Praesent interdum tincidunt mauris ut mollis. Nam sed purus enim.  Mauris odio erat, iaculis vel iaculis sit amet, volutpat blandit est.  Cras quis malesuada elit. Maecenas dui sem, semper vitae pretium nec,  mollis quis purus. Maecenas aliquam suscipit lectus a auctor. Sed  aliquet viverra est non suscipit. Maecenas odio odio, egestas vel  vehicula ac, dapibus ac lectus. Cras a euismod eros. Sed auctor risus  ultrices nisi malesuada lobortis sit amet at enim. Quisque sit amet dui  nulla, sit amet cursus metus. Phasellus egestas blandit commodo. 
  Donec tristique urna et arcu sagittis convallis. Duis pretium ornare  luctus. Suspendisse tellus nulla, condimentum mattis sollicitudin sed,  imperdiet ac lacus. Duis dui ligula, vulputate et vulputate eu, viverra  ac felis. Phasellus mollis sollicitudin consequat. Phasellus ac ipsum  non neque convallis elementum ac vel lectus. Phasellus in fermentum  libero. Proin massa tortor, tincidunt in cursus a, placerat ornare  turpis. Praesent ullamcorper mollis cursus. Donec sollicitudin, purus  quis fringilla posuere, ipsum arcu cursus erat, ut luctus tellus orci eu  ipsum. Mauris risus erat, dapibus consequat rhoncus vitae, tincidunt  vel est. Duis id lectus lacus, et sollicitudin tortor. Proin id lectus  sed mauris lacinia sodales sed quis sapien. Integer quis dolor eros, non  viverra lorem. Curabitur vestibulum malesuada elit, a mollis quam  egestas at. Cras malesuada velit ut metus molestie dignissim sit amet ac  mauris. 
  In quis nulla tortor. Sed sodales hendrerit nibh sollicitudin fringilla.  Etiam id sem magna, scelerisque vehicula elit. Fusce vulputate sagittis  placerat. Morbi pretium nulla at leo dapibus vehicula. Mauris sagittis  scelerisque leo quis ultrices. Donec augue dui, accumsan vel tempor sed,  lacinia vitae purus. Suspendisse potenti. Nulla...

JavaScript

// For selected text should heiglited using javascript
init()
        
    function init()
    {
        addListeners();
        adjustText(document.getElementById("text"));   
    }
    
    function addListeners()
    {
        document.body.onclick = clicked;   
    }
    
    function adjustText(holder)
    {
        text = holder.innerHTML.split(" ");
        holder.innerHTML = "";
        for(var i=0;i<text.length;i++)
        {
            text[i] = text[i].replace("\n", "");
            var newText = document.createElement("span");
            var leadSpace = document.createTextNode(" ");
            var endSpace = document.createTextNode(" ");
            newText.innerHTML = text[i];
            holder.appendChild(leadSpace);
            holder.appendChild(newText);
            holder.appendChild(endSpace);
        }
    }
    
    function clicked(evt)
    {
        if(evt.target.tagName == "SPAN" && evt.target.innerHTML)
        {
            evt.target.style.color='blue';
            //alert(evt.target.innerHTML);
        }  
    }