Creating a new Location object in javascript

Question

Is it possible to create a new Location object in javascript? I have a url as a string and I would like to leverage what javascript already provides to gain access to the different parts of it.

Here's an example of what I'm talking about (I know this doesn't work):

var url = new window.location("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;
// etc etc

Is anything like this possible or would I essentially have to create this object myself?

score 124 · Accepted Answer · answered Jul 09 '10 at 14:37

124

Well, you could use an anchor element to extract the url parts, for example:

var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
var protocol = url.protocol;
var hash = url.hash;

alert('protocol: ' + protocol);
alert('hash: ' + hash);

It works on all modern browsers and even on IE 5.5+.

Check an example here.

answered Jul 09 '10 at 14:37

Christian C. Salvadó

807,428
183
922
838

6

I didn't know you could do that. Neat. – lawnsea Jul 09 '10 at 14:41
1

+1 what I was typing. That `` elements implement the `location` URL decomposition attributes goes back to the earliest JavaScript versions and is supported everywhere. It is (finally!) standardised in the HTML5 spec. – bobince Jul 09 '10 at 14:41
3

+1. Ditto. I had no idea that `` implemented location either. – Josh Johnson Jul 09 '10 at 15:11
1

I think I tried this once, and then found that for IE I need to add this to the DOM before it works. Maybe I need to try again. – donquixote Oct 16 '11 at 19:43
4

An important note: it appears that Internet Explorer has a bug where it omits the leading slash on the pathname attribute on objects like this. You could normalize it by doing something like: `url.pathname = url.pathname.replace(/(^\/?)/,"/");` – Yahel Jun 20 '12 at 04:56
1

If you are trying to use this to validate URLs, it gets weird. When you enter an invalid URL such as `url.href = "http"`, it defaults the hostname to the domain of the site you are running the JS code on. – Sean Aug 04 '16 at 13:14
1

That's perfect solution! – Egor May 05 '17 at 03:47
Accidentally downvoted, bitten by the "can't undo downvote" long-standing issue. Sorry! – Szczepan Hołyszewski May 21 '21 at 09:47

Rael Gugelmin Cunha · Answer 2 · 2022-01-25T21:50:32.983

45

How about use the standard URL object?

const url = new URL("http://www.example.com/some/path?name=value#anchor");
const { hash } = url;

Then console.log(hash) will output #anchor.

Warning: This interface is a bit new, so, if you're not using a transpiler, please, check the compatibility table and do your tests at target browsers.

edited Jan 25 '22 at 21:50

answered Nov 25 '15 at 16:41

Rael Gugelmin Cunha

3,327
30
25

4

As long as you don't need to support Internet Explorer, this is definitely the best solution. The URL interface uses all the same property names as Location, so it's fully backwards compatible, but it also adds a very useful `searchParams` property. – Hayden Schiff Dec 05 '18 at 23:55
Don't forget the `new` in `new URL(`. – Boris Verkhovskiy Oct 23 '19 at 19:09

score 8 · Answer 3 · answered Jul 09 '10 at 14:44

8

You can leverage the power of an anchor element

var aLink = document.createElement("a");
aLink.href="http://www.example.com/foo/bar.html?q=123#asdf";
alert(aLink.pathname);

answered Jul 09 '10 at 14:44

epascarello

204,599
20
195
236

score -6 · Answer 4 · answered Jul 09 '10 at 14:36

You can parse it in a regex to get the parts as matches... I don't have the full code right now, but this can be used to get the querydata:

var myUrl = window.location.href;
var matches = myUrl.match(/([^\?]+)\?(.+)/);
var queryData = matches[2];

matches[0] is the full string, matches(1) is the first part of the URL (up to the ?)... you could build up a regular expression to parse each part of a string url if you want...

You can also use one of the many libraries already out there for this.

Creating a new Location object in javascript

4 Answers4

Linked

Related