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"

take care with this function, because parser.href = null will return the infos relative to the current page

parser.protocol; // => "https:"
parser.hostname; // => "gist.github.com"
parser.port;     // => "80"
parser.pathname; // => "jlong/2428561
...

also parser.href = '/test' will complete protocol, hostname, and others, with the one relative to the current page

For ftp, ssh, sftp and more i use lib
https://www.npmjs.com/package/uri-parse-lib

<3

Well, this great solution works only with 100% consistent URL strings, where all URL parts exists. Try example.com without the protocol:

1. go to any https:// website, eg. https://microsoft.com
2. open console
3. write the code:

var parser = document.createElement('a');
parser.href = "example.com"; // for example, this is user entered URL in some form's input field (`Your home page` field or something) and you trying to parse it with the method above in this topic

(You see the trick? The anchor element you've created is not going to the `example.com`, it is going on the current site's `example.com` section page — `https://microsoft.com/example.com`)

4. now output the protocol:

console.log(parser.protocol);

5. it will output https: — because you have created anchor <a> element on https://microsoft.com website
6. ...
7. PROFIT

<4

just leave this here

rtmp://rtmp-api.facebook.com:80/rtmp/102083600322?ds=1&s_l=1&a=ATjMssSegtYUsg5du

cool !

Why I am getting Port as empty ?
https://jsfiddle.net/mohan_mu/uqf461Lo/

@mohan-mu it's because https default port is 443. Same happens if you use http and port 80.

Any alternative for doing this from within a service worker?

edit: new URL() seems to do the trick

new URL('your_url') is great idea, however it doesn't work in IE https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#Browser_compatibility

This doesn't work if protocol is " * " .
url=" * ://fgf.com"
" * ://fgf.com"
parser.href = url;
" * ://fgf.com"
parser.protocol
"chrome-extension:" What the hell? It supposed to be "*:" no?

praser.href = "google.com"
// relative url + /google.com

probably you want to add this before checking...

if (!/^(?:f|ht)tps?:///.test(url)) {
url = "http://" + url;
}

This is helpful. Link anatomy

thanks @HaNdTriX ! Definitely the best solution for chrome.

hello, if i need slash at end of url?

使用这个可以解决ie10的URL()不存在的问题
use this way to solve problem that ie10 do not have URL() method

A bit of a gotcha with Firefox and relative urls. The following works in Chrome and Safari, but not Firefox:

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

If you need this, then it's best to stick with:

parser.href.split('?')[1];

Of course in this case the ? won't be returned like it is with parser.search

like!

parser.href = window.location

If you want the current page info.

const parseURL = (url) => {
if (!url) throw new Error('pls input correct url');
url = url.replace(/\s+/g, '');

const parser = document.createElement("a");
parser.href = url;

const queries = parser.search
.replace(/^?/, "")
.split("&")
.map(item => item.split('='))
.reduce((prev, curr) => ({
...prev,
[curr[0]]: curr[1],
}), {});

return {
protocol: parser.protocol,
host: parser.host,
hostname: parser.hostname,
port: parser.port,
pathname: parser.pathname,
hash: parser.hash,
queries,
}
};

this is gold

Thanks for your sharing.
I LOVE this way, but I'm wondering is it better way than regex.

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