JSFiddle - React, Tailwind, and code Playground

by Whre

HTML

Bacon ipsum dolor sit amet capicola prosciutto shoulder corned beef fatback shank. Meatloaf pork loin kevin, pork chop frankfurter meatball turducken chicken ham hock capicola porchetta chuck. Pork loin drumstick short ribs, turkey shank jowl filet mignon tri-tip. Brisket meatball fatback biltong pork. Brisket meatball bresaola doner short loin pork chop jerky ground round ham hock sirloin.

CSS

.selection {
    background:blue;
    color:#fff;
    border-radius:100px;
}

JavaScript

var lastSelection,selectInterval;

$("body").on("selectstart",function() {
    selectInterval = window.setInterval(function($elem) {
        roundSelection($elem);
    },1000,$(this));

});

function roundSelection($elem) {
    console.log("Hi");
        var selection = (window.getSelection() || document.selection.createRange()).toString();
        if(selection == lastSelection) return;
        lastSelection = selection;
        var elemHTML = $elem.html();
        var newElemHTML = elemHTML.replace(selection,'<span class="selection">' + selection + '</span>');
        console.log(newElemHTML);
        $elem.html(newElemHTML);
        $("*").one("mousedown mouseup",function() {
           window.clearInterval(selectInterval); $(".selection").eq(0).replaceWith($(".selection").eq(0)[0].childNodes);
        });
}