JSFiddle - React, Tailwind, and code Playground

by Dwza

HTML

<pre>
In the task system, is there a way to automatically have any site / page URL or image URL be hyperlinked in a new window?

So If I type or copy http://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.like this http://stackoverflow.com/

This would save us a lot time in task building, reviewing and creating messages.
Test URL's
http://www.stackoverflow.com/
https://stackoverflow.com/
www.stackoverflow.com
http://www.abc.xy
http://abc.xy
https://www.abc.xy
https://abc.xy
<span style='color:red'>www.abc.xy</span>
abc.xy
<a href='http://stackoverflow.com/'>http://stackoverflow.com/</a>
</pre>

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