JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<div class="conttext">How hard can it be to achieve this here and now. Will it be difficult or can it be done with great simplicity</div>

CSS

.highlight {
    color:#888;
    position:relative;
    display:inline-block;
}

JavaScript

$(document).ready(function () {
    $(document).on("mouseup", ".conttext", function () {
        var highlight = window.getSelection();
        console.log(highlight);
        var spn = '<span class="highlight">' + highlight + '</span>';
        var text = $('.conttext').text();
        $('.conttext').html(text.replace(highlight, spn));
    });
    $(document).on("mouseover", ".highlight", function () {
        alert("You hovered on selected tex");
    })
});