JSFiddle - React, Tailwind, and code Playground

HTML

<div id="t">
<a href="http://twitter.com">Go To Twitter</a>
    here is a url http://anotherurl.com test ftp://lol.com youpi
    <img src="https://si0.twimg.com/a/1344367162/images/resources/twitter-bird-light-bgs.png"/>
    </div>

JavaScript

function repl(node) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;

    var nodes=node.childNodes;
    for (var i=0, m=nodes.length; i<m; i++)
    {
        var n=nodes[i];
        if (n.nodeType==n.TEXT_NODE)
        {
            var g=n.textContent.match(exp);
            while(g) {
                var idx=n.textContent.indexOf(g[0]);
                var pre=n.textContent.substring(0,idx);
                var t=document.createTextNode(pre);
                var a=document.createElement("a");
                a.href=g[0];
                a.innerText=g[0];
                n.textContent = n.textContent.substring(idx+g[0].length);
                n.parentElement.insertBefore(t,n);
                n.parentElement.insertBefore(a,n);
                g=n.textContent.match(exp);
            }
        }
        else
        {
            repl(n);
        }
    }
}

var r=repl(document.getElementById("t"))