JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div class="content">
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
</div>

CSS

.highlight{
    background-color:yellow;
}

JavaScript

//test();

$(".content").on("mouseup", function(){
   
    //var test = window.getSelection().toString();
    //var content = $(".content").text();
    var start = window.getSelection().baseOffset;
    var end = window.getSelection().focusOffset;
    //console.log(window.getSelection());
    if (start < end){
        var start = window.getSelection().baseOffset;
        var end = window.getSelection().focusOffset;
    } else{
        var start = window.getSelection().focusOffset;
        var end = window.getSelection().baseOffset;
    }
    //alert(start + ", " + end);
    
    
    test(start - 1, end - 1);
    
});

function test(start, end){

    //alert(start + ", " + end);
    
var element = $('.content');
var highlightStart = '<span class="highlight">';
var highlightEnd = '</span>';
var offset = 0; //$(".content .highlight").length * 4;

//start the fun
var string = element.html();

newString = "";
for ( var i = 0; i < string.length; i++ ) {
  char = string.charAt(i);
  if (i == start - offset) {
    char += highlightStart;
  }
  if (i == end  - offset) {
    char += highlightEnd;
  }  
  newString += char;
}
    console.log(string);
    console.log(newString);

element.html(newString);
}