JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<button onclick="processChatMessage">CLICK ME</button>

JavaScript

//  var regex = new RegExp([
    //   "(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)",
    //   "(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])",
    //   "(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}",
    //   "(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*",
    //   "[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*",
    //   "(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?"].join(''), 'g');

    var regex = /^(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;

    var processChatMessage = function ( message ) {
    
          var fullTextMessage  = message.getObject().replace("<p CLASS='extmsg'>","<p CLASS='extmsg'> ");
          var fullTextMessage  = message.replace("<br>"," <br>");
          var messageSplited = fullTextMessage.split(/:(.+)/);
          console.log('THIS IS SPLITED MESSAGE:');
          console.log(messageSplited);
          var tempStringArray = messageSplited[1].split(" ");
          for(var i = tempStringArray.length; i -= 1;){
            if(regex.test(tempStringArray[i])) {
              tempStringArray[i] = '<a href="' +
              (/^http/.test(tempStringArray[i]) ? tempStringArray[i] : 'http://' + tempStringArray[i]) +
              '" target="_blank">' + tempStringArray[i] + '</a>';
            }
          }
          
          tempStringArray = tempStringArray.join(' ');
          console.log(tempStringArray);
          fullTextMessage = messageSplited[0] + ':' + tempStringArray;
        //  chatMsgBuffer = fullTextMessage;
    }
    
    processChatMessage("<p CLASS='extmsg'> [email protected]: www.o2.pl because of this: some text<br>");
    processChatMessage("<p CLASS='extmsg'> [email protected]: jkiś tam text");
    processChatMessage("<p CLASS='extmsg'> [email protected]:...