URI Parsing with Javascript

uri.js

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

This is not URI parsing, only URL parsing.

additional you can get the origin at once:

parser.origin // => http://example.com

new URL('https://gist.github.com/jlong/2428561?foo=bar#test')

The Best

new URL('https://gist.github.com/jlong/2428561?foo=bar#test')

The Best

Note that this will only worl with full absolute URLs and throw an error with for example new URL('options.php'):
TypeError: options.php is not a valid URL.

While the createElement-solution also takes relative URLs (although the result you get back will be a full URL):

let urlParser = document.createElement("a");
urlParser.href = 'options.php';
urlParser.hash = 'foobar';
console.log(urlParser.href);
console.log(urlParser.getAttribute('href'));
// result of both logs is the full URL: https://example.com/options.php#foobar

parser.host and praser.hostname are available,
parser.host - return domain WITH the port ex: github.com
parser.hostname - return just domain ex: github.com:8080

checked here