JSFiddle - React, Tailwind, and code Playground

HTML

<div><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>
 <a href="https://static.doubleclick.net/viewad/4327673/1-728x90.jpg">foo</a>

    <br>
    <br>
    <br><span>This would save us a lot time in task building, reviewing and creating messages.</span>

</div>

JavaScript

function linkify(str) {
    var newStr = str.replace(/(<a href=")?((https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)))(">(.*)<\/a>)?/gi, function () {

        return '<a href="' + arguments[2] + '">' + (arguments[7] || arguments[2]) + '</a>'
    });
    console.log(newStr)
    $('div').html(newStr); //fill output area
}

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