JSFiddle - React, Tailwind, and code Playground
HTML
<ul id='domains-list'>
<li>http://www.google.co.sa</li>
<li>http://WWW.EXAMPLE.NET</li>
<li>http://www.google.com</li>
<li>http://www.some-site.engineering</li>
<li>https://www.google.com</li>
<li>http://www.efg-cba.asdfgh</li>
<li>http://maps.google.com</li>
<li>httphttps://www.example.net</li>
<li>http://abc.site-name.com</li>
<li>https://some-sub-domain.exam-ple.musem.uk</li>
<li>http://google.com</li>
<li>http://sub-domain.example-site.engineering</li>
<li>http://test-www.mi-creativity.com</li>
<li>https://google.co.in</li>
<li>www.google</li>
<li>www.google.com</li>
<li>mail.google.com</li>
<li>://www.google</li>
<li>//www.google</li>
<li>:google.com</li>
<li>http://www..google.co.sa</li>
<li>http://www.google..co.uk</li>
<li>http://www.google.co..uk</li>
<li>htt:google.com</li>
<li>http:google.com</li>
<li>http:/google.com</li>
<li>http//www.google.com</li>
<li>http://www.go ogle.com</li>
<li>http://www.google.c om</li>
<li>http://www.-google.com </li>
<li>http://www.g--oogle.com </li>
<li>http://www.google-.com</li>
<li>http://www.-google.com</li>
<li>http://www.g--oogle.com</li>
<li>http://www.example.c</li>
</ul>
CSS
*{
padding: 0;
font-family: verdana, sans-serif;
font-size:1em;
}
li {
padding: 10px;
border-bottom: 1px dotted #AAA;
}
li:nth-child(even) {
background-color: #EEE;
}
li span {
color: white;
padding: 3px 5px;
border-radius: 3px;
font-size: 12px;
}
.matched {
background-color: green;
}
.not-matched {
background-color: darkred;
color: white;
}
JavaScript
var domains = document.querySelectorAll('#domains-list li'),
$URLregX = /^https?:\/\/www\.(?:[a-z0-9]-?)+[^-\.]\.[a-z]{2,15}(?:\.[a-z]{2})?$/i;
for (var i = 0, ln = domains.length; i < ln; i++) {
var th = domains[i],
urlText = th.innerHTML,
$span = ($URLregX.test(urlText)) ? ' <span class="matched">Matched</span>' : ' <span class="not-matched">NOT Matched</span>';
th.innerHTML = urlText + $span;
}