JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" onclick="surroundSelection()" value="Surround">
<div>Select text to be sorrounded.</div>

CSS

.selected{
    color:red;
    font-weight:bold;
}

JavaScript

function surroundSelection() {
    var span = document.createElement("span");
    span.className = "selected";
    
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}