JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d">This is some text. Hello!</div>

JavaScript

document.getElementById('d').addEventListener('mouseup',function(e){
    var s = window.getSelection();
    var n = s.anchorNode;
    var o = s.anchorOffset;
    var f = s.focusOffset;
    n.textContent = n.textContent.substring(0,o)+'<span style="color:red;">'+n.textContent.substring(o,f)+'</span>'+n.textContent.substring(f,n.textContent.length);
    // document.getElementById('d').innerHTML = n.textContent;
    // this line messes stuff up because of the difference between a node's textContent and it's innerHTML.
});