JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable" contenteditable="true" onInput="checkInput()">test placeholder input <a href="http://test.com">http://test.com</a> 
</div>

CSS

i, a {
    text-decoration: none;
    color: #3B94D9;
}

JavaScript

function checkInput() {
    var el = document.getElementById("editable");
    
    //check for overflow text
    var MAX_SIZE = 140;
    var txtLen = el.textContent.length;
    if(txtLen >= MAX_SIZE) {
        var oflow = el.textContent.length - MAX_SIZE;
        var excessRange = new Range();
        el.textContent = el.textContent; //normalize div to text node
        excessRange.setStart(el.firstChild, txtLen - oflow);
        excessRange.setEnd(el.firstChild, txtLen);
        excessRange.surroundContents(document.createElement("b"));
    }
    
    //usernames or hashtags
    var unameHtagEx = /(@|#){1}([A-Za-z]+[A-Za-z0-9]+)/gi;
    var unameHtagRegex = new RegExp(unameHtagEx);
    el.innerHTML = el.innerHTML.replace(unameHtagRegex, function(match) {
        return "<i>" + match + "</i>";
    });
    
    //links
    var linkEx = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
    var linkRegex = new RegExp(linkEx);
    el.innerHTML = el.innerHTML.replace(linkRegex, function(match) {
        return "<a target='_blank' href=" + match + ">" + match + "</a>";
    });
       
}