JSFiddle - React, Tailwind, and code Playground

by Tony C

JavaScript

var urlCheck = new RegExp('(https?:\/\/[-a-zA-Z0-9@:%_\\+.~#?&//=]{2,256}\\.[a-z]{2,4}\\b(\/[-a-zA-Z0-9@:%_\\+.~#?&//=]*)?)','g');
var str = 'fdsf http://apple.com www.google.com https://tcasparro.inside-box.net/fsdfsd fsdfsd';
var originalLength = str.length;
var newContainer = document.createElement('span');
var current_index = 0;

while ((regexMatch = urlCheck.exec(str)) !== null)
{
    var textNode = document.createElement('span');
    var txt = str.substring(current_index, regexMatch['index']);
    var text = document.createTextNode(txt);
    textNode.appendChild(text);
    
    newContainer.appendChild(textNode);  
    
    var aNode = document.createElement('a');
    aNode.setAttribute('href', regexMatch[0]);
    
    var text = document.createTextNode(regexMatch[0]);
    aNode.appendChild(text);
    
    newContainer.appendChild(aNode); 
    
    current_index += regexMatch[0].length + txt.length;
}
console.log(newContainer);