JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Regular Test</h1>
<br />
<h3>String:</h3>
<div id="original"></div>
<br />
<h3>Regex:</h3>
<div id="regex"></div>
<br />
<h3>Result:</h3>
<div id="result"></div>

CSS

h1
{
    font-size: 2em;
}
h3
{
    font-size: 1.2em;
}
h1, h3
{
    font-weight: bold;
}
#regex
{
    padding-left: 1em;
    color: #333399;
}
#result
{
    padding-left: 1em;
    color: #993399;
}

JavaScript

var myString = "http://your.domain.name:80/exp/exp1/ets/index.html?q=etc&r=ooo&f=000#author";

var regex = /^(?:([a-z]+):)?(\/{0,3})([a-z0-9.\-_]+)?(?::([0-9]+))?(?:\/([0-9a-z\-_\/.]+))?(?:\/([a-z]+.[a-z]{3,4}))(?:\?([^?#]+&[^?#]+))?(?:#([a-z0-9\-_.]+))$/i;

var result = myString.match(regex);

var output = "";

$("#original").html(myString);
$("#regex").html(regex.toString());

for(var i=0; i<result.length; i++)
{
    output += i.toString() + ":" + result[i] + "<br />";
}

$("#result").html(output);