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?

Christian C. Salvadó · Accepted Answer · 2010-07-09 14:37:11Z

126

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 9, 2010 at 14:37

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

lawnsea Over a year ago

I didn't know you could do that. Neat.

bobince Over a year ago

+1 what I was typing. That <a> 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.

Josh Johnson Over a year ago

+1. Ditto. I had no idea that <a> implemented location either.

donquixote Over a year ago

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.

Yahel Over a year ago

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(/(^\/?)/,"/");

|

Rael Gugelmin Cunha · Accepted Answer · 2022-01-25 21:50:32Z

48

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, 2022 at 21:50

answered Nov 25, 2015 at 16:41

Rael Gugelmin Cunha

3,5721 gold badge32 silver badges28 bronze badges

2 Comments

Hayden Schiff Over a year ago

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.

user3064538 Over a year ago

Don't forget the new in new URL(.

epascarello · Accepted Answer · 2010-07-09 14:44:56Z

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 9, 2010 at 14:44

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Andir · Accepted Answer · 2010-07-09 14:36:18Z

-6

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.

answered Jul 9, 2010 at 14:36

Andir

2,0831 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Creating a new Location object in javascript

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related