JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cont" contenteditable></div>

CSS

#cont{
	border:1px #000 solid;
	width:500px;
	height:500px;	
}

JavaScript

$(document).ready(function(e) {
    $('body').on('keyup', '#cont', function(e){
		var cont = $('#cont').html();
		var cont2 = cont.replace(/\@\w+\s/gi, replacer);
		$('#cont').html(cont2);
		
		console.log($('#cont').html());
	});
});


var ar = {
    "data": [
        {
            "user": "testuser1",
            "name": "testname1"
        },
        {
            "user": "testuser2",
            "name": "testname2"
        }
    ]
};

console.log (ar);


function replacer(match, p1, p2, p3, offset, string){
  	var name = '';
	var user = '';
	$.each(ar.data, function(i, item){
		var keyword = match.substring(1, (match.length - 1));
		if(keyword == item.name){
			user = item.user;
			name = item.name;
		}
	});
	return  '<a href="/Profile/'+user+'">'+name+'</a>';
}