JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="" id="" cols="30" rows="10"></textarea>
<p></p>

CSS

textarea {
    width: 600px;
    height: 200px;
    padding: 0;
    border: 1px solid black;
}
p {
    width: 600px;
    height: 200px;
    border: 1px solid black;
}

JavaScript

$(function() {
    $('textarea').change(function() {
        var tmp = $(this).val();
        var url_reg = /(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*/g;
        
        var result = tmp.replace(url_reg, function(link) {
            return '<a href="' + link + '">'+ link +'</a>';
        });       
    
        $('p').text(result);
    });
});

/*
http://www.foo.com
www.example.org
fooexample.gov/images/foo.jpg
*/