Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
URI Parsing with Javascript
var parser = document.createElement('a');
parser.href = "";
parser.protocol; // => "http:"
parser.hostname; // => ""
parser.port; // => "3000"
parser.pathname; // => "/pathname/"; // => "?search=test"
parser.hash; // => "#hash"; // => ""
Copy link

so great!!

Copy link

sloanlance commented Nov 25, 2016

@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.

Copy link

ybootin commented Nov 29, 2016

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

parser.protocol; // => "https:"
parser.hostname; // => ""
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

Copy link

PxyUp commented Dec 22, 2016

For ftp, ssh, sftp and more i use lib

Copy link

mpjura commented Feb 7, 2017


Copy link

artuska commented Feb 12, 2017

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

  1. go to any https:// website, eg.
  2. open console
  3. write the code:
var parser = document.createElement('a');
parser.href = ""; // 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 ``, it is going on the current site's `` section page — ``)
  1. now output the protocol:
  1. it will output https: — because you have created anchor <a> element on website
  2. ...

Copy link

msteitle commented Mar 9, 2017


Copy link

crmsoft commented Mar 29, 2017

just leave this here


Copy link

cool !

Copy link

Why I am getting Port as empty ?

Copy link

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

Copy link

jespertheend commented Aug 19, 2017

Any alternative for doing this from within a service worker?

edit: new URL() seems to do the trick

Copy link

bomzj commented Sep 7, 2017

new URL('your_url') is great idea, however it doesn't work in IE

Copy link

maenotsuzuki commented Dec 5, 2017

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

Copy link

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

probably you want to add this before checking...

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

Copy link

This is helpful. Link anatomy

Copy link

seliver commented Jan 18, 2018

thanks @HaNdTriX ! Definitely the best solution for chrome.

Copy link

hello, if i need slash at end of url?

Copy link

YagamiLight126 commented May 22, 2018

use this way to solve problem that ie10 do not have URL() method

Copy link

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";;

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


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

Copy link

pulketo commented Dec 11, 2018


Copy link

parser.href = window.location

If you want the current page info.

Copy link

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 =
.replace(/^?/, "")
.map(item => item.split('='))
.reduce((prev, curr) => ({
[curr[0]]: curr[1],
}), {});

return {
protocol: parser.protocol,
hostname: parser.hostname,
port: parser.port,
pathname: parser.pathname,
hash: parser.hash,

Copy link

this is gold

Copy link

xx4159 commented May 2, 2019

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

Copy link

ZzZombo commented Jul 8, 2019

This is not URI parsing, only URL parsing.

Copy link

additional you can get the origin at once:

parser.origin // =>

Copy link

frankdors commented Oct 18, 2019

Copy link

Connum commented Feb 28, 2020

new URL('')

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';
// result of both logs is the full URL:

Copy link

martinwojtus commented May 1, 2020 and praser.hostname are available, - return domain WITH the port ex:
parser.hostname - return just domain ex:

checked here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment