JSFiddle - React, Tailwind, and code Playground

by gchoken

HTML

<textarea id="editor" cols="80" rows="20">
Hello <first_name>,
    Welcome to the set experiment!
</textarea>

JavaScript

var textarea = document.getElementById("editor");
    textarea.onclick = textarea_Click;

    function textarea_Click() {
        var caret = getCaretPosition(textarea);
        var text = textarea.value;
        var begin = caret - 1;
        while (begin >= 0) {
            if (text.charAt(begin) == '>') return;
            else if (text.charAt(begin) == '<') break;
            else begin--;
        }

        if (begin >= 0) {
            var end = caret;
            while (end < text.length) {
                if (text.charAt(end) == '>') break;
                else end++;
            }

            if (end < text.length)
                setSelection(textarea, begin, end);
        }
    }

    function getCaretPosition(el) {
        if (el.selectionStart) {
            return el.selectionStart;
        } else if (document.selection) {
            var r = document.selection.createRange();
            if (r == null) return 0;
            var re = el.createTextRange();
            var rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);
            return rc.text.length;
        }
        return 0; 
    }

    function setSelection(el, begin, end) {
        if ("selectionStart" in el) {
            el.selectionStart = begin;
            el.selectionEnd = end + 1;
        } else if (document.selection) {
            var range = el.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end + 1);
            range.moveStart('character', begin);
            range.select();
        }
    }