JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="demo">http://m.facebook.com</div><div class="demo">https://m.facebook.com</div>
<div class="demo">http://www.m.facebook.com</div><div class="demo">https://www.m.facebook.com</div>

<div class="demo">http://md.facebook.com</div><div class="demo">https://md.facebook.com</div>
<div class="demo">http://www.md.facebook.com</div><div class="demo">https://www.md.facebook.com</div>

<div class="demo">m.facebook.com</div><div class="demo">www.m.facebook.com</div>
<div class="demo">facebook.com</div>

############### SHOULD MATCH: ###############
<div class="demo">http://foo.com/blah_blah</div>
<div class="demo">http://foo.com/blah_blah/</div>
<div class="demo">http://foo.com/blah_blah_(wikipedia)</div>
<div class="demo">http://foo.com/blah_blah_(wikipedia)_(again)</div>
<div class="demo">http://www.example.com/wpstyle/?p=364</div>
<div class="demo">https://www.example.com/foo/?bar=baz&inga=42&quux</div>
<div class="demo">http://✪df.ws/123</div>
<div class="demo">http://userid:[email protected]:8080</div>
<div class="demo">http://userid:[email protected]:8080/</div>
<div class="demo">http://[email protected]</div>
<div class="demo">http://[email protected]/</div>
<div class="demo">http://[email protected]:8080</div>
<div class="demo">http://[email protected]:8080/</div>
<div class="demo">http://userid:[email protected]</div>
<div class="demo">http://userid:[email protected]/</div>
<div class="demo">http://142.42.1.1/</div>
<div class="demo">http://142.42.1.1:8080/</div>
<div class="demo">http://➡.ws/䨹</div>
<div class="demo">http://⌘.ws</div>
<div class="demo">http://⌘.ws/</div>
<div class="demo">http://foo.com/blah_(wikipedia)#cite-1</div>
<div class="demo">http://foo.com/blah_(wikipedia)_blah#cite-1</div>
<div class="demo">http://foo.com/unicode_(✪)_in_parens</div>
<div class="demo">http://foo.com/(something)?after=parens</div>
<div class="demo">http://☺.damowmow.com/</div>
<div...

CSS

http://-error-.invalid/

JavaScript

var pattern = /^(https?:\/\/)?(www?.)?([^.][\da-z]*.){0,2}([\da-z-]+)\.([a-z]{2,6})([\/a-z]*)*\/?$/;
$(".demo").each(function(i) {
    var str = $(this).html();
    var str2 = str.replace(pattern, "");
    
    if ($(this).html() != str2) {
        $(this).css("color","green");
        console.log(str2+"[-]"+$(this).html());
    } else {
        $(this).css("color","red");
    }
    //$(this).html(str.replace(pattern, ""));
});