JSFiddle - React, Tailwind, and code Playground

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>

<div id="textarea" contenteditable id="text" onkeypress="check()">https://google.com
</div>

CSS

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

JavaScript

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

 //run function on content

  function check() {
  alert('erghergergh');
  return false;
            var text = $('div').html();
            linkify(text);
           var clck=linkify(text);
          
            
        }