JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="range">01010101.11110000.11100010.10011001.00011111.00000001</div>

CSS

em{
 background: yellow;   
}

JavaScript

var r = document.createRange();
var s = window.getSelection();
var pos = 0;

function dig(el){
    $(el).contents().each(function(i,e){
        if (e.nodeType==1){
            // not a textnode
         dig(e);   
        }else{
            if (pos<start){
               if (pos+e.length>=start){
                range.setStart(e, start-pos);
               }
            }
            
            if (pos<end){
               if (pos+e.length>=end){
                range.setEnd(e, end-pos);
               }
            }            
            
            pos = pos+e.length;
        }
    });  
}
var start,end, range;

function highlight(element,st,en){
    range = document.createRange();
    start = st;
    end = en;
    dig(element);
    s.addRange(range);
    
}
highlight($('.range'),10,25); // change your index here.

var ra = s.getRangeAt(0);

var newNode = document.createElement("em");
newNode.appendChild(ra.extractContents()); 
ra.insertNode(newNode);