JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<p id="p">
  Hi , It's a new question in stackoverflow!
</p>

CSS

.red { color: #f00; }

JavaScript

var x = {};
p = document.getElementById('p');
p.addEventListener('mouseup', setClass);

function setClass() {
    var selection = x.getSelected(), range, 
        span = document.createElement("span");
  	span.classList.add('red');
    if (selection != '') {
      range = selection.getRangeAt(0);
      range.surroundContents(span);
    }  
}

x.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}