JSFiddle - React, Tailwind, and code Playground

HTML

<h3><a href="#" id="btnRange">Display Range</a> |
    <a href="#" id="btnMark">Mark 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 btnDisplay = $("#btnRange"),
    btnMark = $("#btnMark");

btnDisplay.click(function() {
    alert(window.getSelection().getRangeAt(0));
    return false;
});

btnMark.click(function() {
    var range = window.getSelection().getRangeAt(0);
    var newNode = document.createElement("mark");
    range.surroundContents(newNode);

    return false;
});