JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <textarea id="foo">6 students carry 2 books to 5 classes</textarea>
</form>

CSS

#foo {
    width: 400px;
    height: 200px;
    font-size: 18px;
}

JavaScript

textareaClicked = function(e){
    var pos = e.target.selectionStart;
    var beforeSelection = e.target.innerHTML.slice(0,pos);
    var afterSelection = e.target.innerHTML.slice(pos);
    var newHTML = beforeSelection.replace(/\d/g,4) + afterSelection;
    e.target.innerHTML = newHTML;
    e.target.setSelectionRange(pos,pos);
};

document.getElementById('foo').onclick=textareaClicked;