JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" contenteditable="true"></div>

CSS

.box {
    width: 500px;
    height: 75px;
    background: #f5f5f5;
    border: 1px solid #333;
    padding: 10px;
}

JavaScript

$(document).on('keyup', ".box", function(e) {
    if (e.keyCode == 32) {
        var text = $(this).text();
        var regexp = /(?=[@])[*@]\w+/;
        
        var newText = text.replace(regexp, function(match) {
            return '<a href="#">' + match + '</a>'
        });
        $(this).html(newText);
        setEndOfContenteditable(this);
    }
});

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}