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"

so great!!

@HaNdTriX posted the best solution here.

It's better to use new URL(...) when it's available. Only if it's not available (in older browsers, for example) does it make sense to use something else. In that case, the approach @jlong shows here is excellent.

I'm surprised @slevithan hasn't posted his parseUri() function in his gists.

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