JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv" contenteditable="true">
    asda@sdsa <b>test</b> adsada
</div>
<p>Word Between @ and Caret : <span id="lastWord"></span></p>

CSS

#myDiv{width:100%;height:200px;border:solid 1px #000;box-sizing:border-box;}

JavaScript

function getWordBetweenAtAndCaret(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 lastWord = preceding.match(/@(.+)$/i);
    if (lastWord) {
        return lastWord;
    } else {
        return false;
    }
}

$('#myDiv').on('keyup focus click', function () {
    var lastWord = getWordBetweenAtAndCaret(this),
        spanLastWord = $('#lastWord');
    if (lastWord) {
        spanLastWord.text(lastWord[1]);
    } else {
        spanLastWord.text('');
    }
});