JSFiddle - React, Tailwind, and code Playground

by Sandeep Gupta

HTML

<div id="divTest" contenteditable="true"></div>

CSS

#divTest {
  height: 1em;
  border: 1px solid black;
}

JavaScript

$('#divTest').on('keyup focus', function (e) {
    if (e.keyCode == 32) {
        var lastWord = getWordPrecedingCaret(this),
            spanLastWord = $('#lastWord');
    }
});

function getWordPrecedingCaret(containerEl) {
    var preceding = "",
        sel,
        range,
        precedingRange;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            preceding = range.toString();
        }
    } else if ((sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        precedingRange = range.duplicate();
        precedingRange.moveToElementText(containerEl);
        precedingRange.setEndPoint("EndToStart", range);
        preceding = precedingRange.text;
    }

    var words = range.toString().trim().split(' '),
        lastWord = words[words.length - 1];
        
    if (lastWord) {
        var resultValue = 'some'; // this value is coming from some other function
        if (resultValue == lastWord) {
            console.log('do nothing: ' + lastWord);
            // do nothing
        } else {
            console.log('replace word ' + lastWord);
            
            /* Find word start and end */
            var wordStart = range.toString().lastIndexOf(lastWord);
            var wordEnd = wordStart + lastWord.length;
            console.log("pos: (" + wordStart + ", " + wordEnd + ")");
                           
            range.setStart(containerEl.firstChild, wordStart);
            range.setEnd(containerEl.firstChild, wordEnd);
            range.deleteContents();
            range.insertNode(document.createTextNode(resultValue));
            // delete That specific word and replace if with resultValue

            /* Merge multiple text nodes */            
            containerEl.normalize();
        }
        return lastWord;
   ...