JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<div>Some text, with some parts selected and some not</div>

JavaScript

var t = $('div').contents().get(0);


$.each(t.nodeValue.split(" "),function(i,e){
   t = t.splitText(e.length);
     if (t.length>0){
     t = t.splitText(1);
     }
});

// select everything

var c = $('div').contents();

$.each(c,function(i,e){
    
    if (i>0){
    if (i%3) { }else{
             e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);        
                   
    }
    
}
    
    
    //.replaceWith($('<span />').text('s')); 
   
});

var s = document.getSelection();
var c = $('div').contents();
t = c.get(0);
var r = document.createRange();
r.setStart(t,1);

var l = c.get(c.length-1);
r.setEnd(l,l.length)  
s.addRange(r);



   $('unselect').hide(); 

window.setTimeout(function(){
   $('unselect').show(); 
    
    /*
    window.setTimeout(function(){
    $('unselect').contents().each(function(i,e){
        
        $(e).unwrap();
    });
},1000);*/

},0);