JSFiddle - React, Tailwind, and code Playground

HTML

<p>this is some random text</p>
<p>this is some random text</p>
<p>this is some random text</p>
<br />
<div>hover on me to hilited selected text<div>

CSS

.hilited{color:red}

JavaScript

$('div').mouseenter(function(){
    var SelRange;
    if (window.getSelection) {
        SelRange= window.getSelection().getRangeAt(0);
    } else if (document.getSelection) {
        SelRange= document.getSelection().getRangeAt(0);
    } else if (document.selection) {
        SelRange= document.selection.createRange();
    }

    if (SelRange!= null && SelRange != '' )
    {

        if (SelRange.pasteHTML)
        {
            SelRange.pasteHTML('<span class="hilited">'+SelRange.text+'</span>');
        }
        else
           {
            var newNode = $('<span class="hilited" />')[0];
            SelRange.surroundContents(newNode);
           }
    }
   
   

});