JSFiddle - React, Tailwind, and code Playground

HTML

<span>In the task system, is there a way to automatically have any site / page URL or image URL be hyperlinked in a new window?</span>
<br><br>
    <span>So If I type or copy http://www.stackoverflow.com/ for example anywhere in the description, in any of the internal messages or messages to clients, it automatically is a hyperlink in a new window.</span>
    <br>
        <a href="http://www.stackoverflow.com/">http://www.stackoverflow.com/</a>
        <br><br>
            <span>Or if I input an image URL anywhere in support description, internal messages or messages to cleints, it automatically is a hyperlink in a new window:</span><br> 
            <span>https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</span><br><br><a href="https://static.doubleclick.net/viewad/4327673/1-728x90.jpg">https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</a>
            <br><br><br><span>This would save us a lot time in task building, reviewing and creating messages.</span>

JavaScript

function linkify(str) {
    var newStr = str.replace(/((http(s)?(\:\/\/))?(www\.)?([\w\-\.\/])*(\.[a-zA-Z]{2,3}\/?))(?!(.*a>)|(\'|\"))/g, '<a href="$1">$1</a>');
    $('pre').html(''); // clear output area
    $('pre').append(newStr); //fill output area
}

var data = $('pre').html(); //get input (content)
linkify(data); //run function on content