JSFiddle - React, Tailwind, and code Playground

HTML

<textarea cols="40" rows="10"></textarea>
<a href="#" class="test-links">Test Links</a>
<a href="#" class="test-images">Test Images</a>
<div id="output"></div>

JavaScript

$(".test-links").click(function(){
var urlex = /\b(([^:\/?#]+):)(\/\/([^\/?#]*))([^?#]*)(\?([^#]*))?(#(.*))?/gi;
var content = $("textarea").val();
var contentArray = content.split(" ");
var linkArray = [];
$.each(contentArray, function(index,value){
if (value.match(urlex)) linkArray.push(value);
});
$("#output").empty();
$.each(linkArray, function(index,value){
$("#output").append(value+"<br/>");
});
});

$(".test-images").click(function(){
var urlex = /^https?:\/\/(?:[a-z\-]+\.)+[a-z]{2,6}(?:\/[^\/#?]+)+\.(?:jpe?g|gif|png)$/gi;
var content = $("textarea").val();
var contentArray = content.split(" ");
var linkArray = [];
$.each(contentArray, function(index,value){
if (value.match(urlex)) linkArray.push(value);
});
$("#output").empty();
$.each(linkArray, function(index,value){
    $("#output").append("<img style='height: 60pt; width: 80pt' src=\""+value+"\"/><br/>"+value);
});
});

/*
pictures
twitter
youtube
*/