JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Make anchor" onmousedown="makeAnchor('jumpmark'); return false">
<div id="editor" contenteditable="true">
    Select some text and press the button to make it an anchor
</div>
<textarea id="html" rows="5" cols="50"></textarea>

CSS

a[name] {
    color: red;
}

JavaScript

function surroundSelectedText(element) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            element.appendChild( document.createTextNode(range.toString()) );
            range.deleteContents();
            range.insertNode(element);

            // Preserve the selection
            range = range.cloneRange();
            range.setStartAfter(element);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        var selRange = document.selection.createRange();
        element.appendChild( document.createTextNode(selRange.text) );
        selRange.pasteHTML(element.outerHTML);
    }
}

function makeAnchor(name) {
    var anchor = document.createElement("a");
    anchor.name = name;
    surroundSelectedText(anchor);
    document.getElementById("html").value = document.getElementById("editor").innerHTML;
}