JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Page </title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="innerWrap">
                <textarea autocomplete="off" id="txtUpdate" style="height: 48px; width: 408px;" ></textarea>
            </div>
        </form>
        <p>Your urls, sir:</p>
        <ul id="theurls">
            <li>:)</li>
        </ul>
    </body>
</html>

JavaScript

$(document).ready(function() {
    $('#txtUpdate').keyup(function() {
        getURLfromText($.trim($(this).val()));
    });
});

function getURLfromText(objTxt) {
    var urlpatt = new RegExp(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi);
    var objArray = objTxt.split(/\s/g);
    $('#theurls').text('');
    $.each(objArray, function(key, value) {
        var result = value.match(urlpatt);
        if (result !== null) {
            $('<li>' + result + '</li>').appendTo('#theurls');
        }
    });
}