JSFiddle - React, Tailwind, and code Playground

CSS

.pass {
    color: green;
}

.fail {
    color: red;
}

h1 {
    padding: 10px 0;
}

JavaScript

///////////////////////////////////////
// INSERT YOUR REGULAR EXPRESSION HERE
var p = {
  // FUCK THESE 3 w's! >:(
  protocol: '^(http(s)?(:\/\/))?(www\.)?'
/*   domain: '[a-zA-Z0-9-_\.]+',
  tld: '(\.[a-zA-Z0-9]{2,})',
  params: '([-a-zA-Z0-9:%_\+.~#?&//=]*)' */
}
///////////////////////////////////////


var matcher = new RegExp(p.protocol);

var shouldMatch = ["http://example.com","http://example.com/","only match a url http://example.com/ ","http://example.com/super","https://example.com/super","example.com/super","example.com","example.com/su-per_duper/?add=yes&subtract=no","example.com/archive/index.html","twitter.com/#!/reply","example.com/234ret2398oent/234nth","codegolf.stackexchange.com/questions/464","crazy.wow.really.example.com/?cat=nth%3E","example-example.com","example1.com"];

$(document.body).append("<h1>Should Return A Match</h1>");
for (var test in shouldMatch) {
  var match = shouldMatch[test].match(matcher);
  var result = "fail";
  if (match) {
    result = "pass";
  }
  
  $(document.body).append("<p class='"+result+"'>"+result+": "+shouldMatch[test]+"</p>");
}

var shouldNotMatch = ["example","super/cool","Good Morning","i:can","hello."];
$(document.body).append("<h1>Should Not Return A Match</h1>");
for (var test in shouldNotMatch) {
  var match = shouldNotMatch[test].match(matcher);
  var result = "pass";
  if (match) {
    result = "fail";
  }
  
  $(document.body).append("<p class='"+result+"'>"+result+": "+shouldNotMatch[test]+"</p>");
}