JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<input id="input" style="width:400px"/>
    <pre id="test"></pre>
cursor at current token: <span id="res"></span>

JavaScript

(function($doc) {
	"use strict";    
   
    var single = /\s/g;
    var spacer = /\s+/g;
    var ledge = /[\s]*[^\s]+[\s]*/g;
    var disp = $doc.getElementById("test");
    var input = $doc.getElementById("input");
    var res = $doc.getElementById("res");
    
    function keyListen(e) {
        var tokens = this.value.split(spacer);
        var pos = caretPos(this);
        var adj = this.value.substring(pos - 1, pos + 1);
        var left = this.value.slice(0, pos + 1).match(ledge).length - 1;
        var curr = adj === "  " ? null : tokens[left];
        res.textContent = curr + "";
		disp.textContent = JSON.stringify(this.value.split(spacer), null, 2);
    }
    
    function caretPos(el) {
        var pos = 0;
        if ($doc.selection) {
            el.focus();
            var sel = $doc.selection.createRange();
            sel.moveStart('character', -el.value.length);
            pos = sel.text.length;
        }
        else if (el.selectionStart || el.selectionStart == '0') pos = el.selectionStart;
        return (pos);
    }
    
    input.addEventListener("keyup", keyListen.bind(input), false);
    
})(document);