JSFiddle - React, Tailwind, and code Playground

HTML

<h3><a href="#" id="btnRange">Click to Display Range</a></h3>
<div contenteditable="true" id="editor">
    This is sample text. You should be able to type in this box or select anywhere in this div and then click the link at the top to get the selected range.
</div>

<br /><br />

<h3>Desired output:</h3>
<div id="desired">
    This is sample text. You should be able to type in this box or <mark>select anywhere in this div</mark> and then click the link at the top to get the selected range.
</div>

CSS

mark {background-color: Yellow;}
h3 {font-weight: bold;}

JavaScript

var btnRange = $("#btnRange");
btnRange.click(function() {

    // this will display the selected text in the alert box
    // ...but how do I instead surround this selected text 
    // with a <span> or preferably a <mark> tag?
    alert(window.getSelection().getRangeAt(0));
    return false;
});