JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div id="content" class="res">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate commodo enim, eget molestie ante convallis eu. Quisque elementum ullamcorper porttitor. Curabitur at tortor a ante sagittis dictum. Curabitur consectetur lacus non nulla scelerisque congue. Donec mollis lorem in neque tempus euismod. Nullam eu sapien at odio scelerisque viverra. Suspendisse sit amet augue eleifend, ultrices ipsum ac, faucibus sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vehicula lorem non odio egestas sollicitudin. Nulla non pulvinar urna. Nunc eget metus quam. Maecenas et pellentesque lorem, ac mollis leo. Quisque erat arcu, tempor ac viverra eu, consectetur ut lacus.
</p>
<p>
Aliquam in orci commodo magna lobortis venenatis. Sed eget nibh eu dolor cursus lobortis a eget nisi. Curabitur blandit posuere dolor, sagittis suscipit sem sagittis nec. Sed id rhoncus nisl, nec pretium tellus. Sed posuere tincidunt convallis. Morbi vel lectus consectetur, blandit urna ut, faucibus diam. Nam sollicitudin at magna sed gravida. Vestibulum eu interdum sapien. Phasellus non nunc lectus. Fusce molestie tempor metus, dictum mollis tortor.
</p>
<p>
Suspendisse potenti. Curabitur accumsan imperdiet dui fringilla placerat. Cras aliquam augue nunc, in sollicitudin sem malesuada sed. Nullam feugiat vel sapien in rhoncus. Cras et aliquet leo, at mollis diam. Aliquam venenatis, magna sed gravida congue, risus elit dignissim odio, non vulputate est risus eget augue. Etiam dui magna, elementum eu lectus a, interdum faucibus sapien.
</p>
<p>
Donec consectetur et sapien sed volutpat. Morbi tincidunt eget sapien molestie pharetra. Nulla augue diam, tincidunt ac felis eu, viverra pellentesque neque. Morbi eu commodo quam, sit amet posuere libero. Nullam ut imperdiet dolor. Nam velit augue, tempus a scelerisque ut, laoreet eget ex. In pharetra molestie mauris ut tristique. Sed pellentesque est in nisl convallis, at suscipit nulla...

CSS

span.highlight-green {background: green; color: #fff}
span.highlight-red {background: red; color: #fff}

.res {
  font-family: sans-serif;
}

JavaScript

function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

console.log(t);
console.log(t.toString());
  return t;
}

$(document).bind('mouseup', '#content', function(){
    var selection = getSelectedText();
    var selection_text = selection.toString();
    // How do I add a span around the selected text?
    
    
    
     var range = selection.getRangeAt(0);
     var currentPos = {
     'start': range.startOffset,
     'end':range.endOffset
     }
  
     
    function isValue(value) {
     return (value !== "");
   }
   

    var txts = selection_text.split("\n");
   
          var search = txts.filter(isValue);  
           console.log(search);
           console.log(currentPos)
         
        //  range.deleteContents();
           
            // setTimeout(function() {
           if(search.length > 1) {
            
            
             console.log('quebra', txts.length);
           
             var new_fragment = document.createElement('span');
              for (var i in txts) {
           
                 /* var container = document.createElement('span');
                   var txt = document.createTextNode('[p]'+search[i]+'[/p]');  
                    container.appendChild(txt); */
                    /*  range.insertNode(container);  */
                   var element = document.querySelectorAll("#content p")[i];
                   console.log('el',element);
                   var text = search[i];
                /*   element.innerHTML = element.innerHTML.replace(search[i], '<span>'+search[i]+'</span>'); */
                 var innerHTML = element.innerHTML;;
                 var index = innerHTML.indexOf(text);
                if (index >= 0) { 
                  innerHTML = innerHTML.replace(new RegExp(text,"gim"), "<span class='highlight-green'>" + text + "</span>");
                 element.innerHTML = innerHTML;
                }
                
              //  }, 200);


 ...