Get url parameters with javascript

Anatoly Mironov

January 10, 2012

There is a question in Stackoverflow and this one, too. There is a fine solution for jQuery. The only thing we need is window.location.search. Say we have http://domain.com?q=hello&a=good#home, then it takes only ?q=hello&a=good, and leaves #home and the main url. Anchors can be retrieved with hash. Here are all properties of window.location: Google Chrome provides a fine function: window.location.getParameter: I like the name of this function. So why not to use it or create this one if a browser doesn’t have it? Well here we go:

if (!window.location.getParameter ) {
  window.location.getParameter = function() {};
}
```Then I don't want it to be depending on jQuery, eventhough the odds are big, that jQuery is there. But in all solutions I have seen, there is no usage of jQuery, so why do it as a jQuery extension? However, we must extract the search part of window.location... I'll use [the solution of Ryan Phelan](http://stackoverflow.com/a/3867610/632117), but without jQuery (again, why extend jQuery without any usage of it?). Thanks to Johannes Milling who improved the code by making it case-insensitive.

if (!window.location.getParameter ) { window.location.getParameter = function(key) { function parseParams() { var params = {}, e, a = /\+/g, // Regex for replacing addition symbol with a space r = /([^&=]+)=?([^&]*)/g, d = function (s) { return decodeURIComponent(s.replace(a, " “)); }, q = window.location.search.toLowerCase().substring(1);

	while (e = r.exec(q))
		params\[d(e\[1\])\] = d(e\[2\]);

	return params;
}

if (!this.queryStringParams)
	this.queryStringParams = parseParams(); 

return this.queryStringParams\[key.toLowerCase()\];

}; }


##### For us Sharepointers

In SharePoint there is actually a built-in javascript function which retrieves the url query parameters: **\_spGetQueryParam** which can be found in init.js:

var id = _spGetQueryParam(“ID”); var url = “/Forms/AllItems.aspx?FilterField1=look&FilterValue1=” + id;

comments from wordpress

Anatoly Mironov — 2012-04-01

Hello asleb! If you add the code I provided to extend window.location object, you can just write:

var name = window.location.getParameter("name"); //bob

If you work with SharePoint, you can use a function from SharePoint javascript API:

 var name = \_spGetQueryParam("name"); //bob

asleb — 2012-04-01

How do you use this? I don’t understand how to get the url param. Do I write i.ex. parseParams(’name’) if the URL is http://example.com/?name=bob This does not work. I am lost.

asleb — 2012-04-01

How do I call this function?

Johannes Milling — 2014-09-01

Hi, great post. However, there is an improvement to be done. The getParameter function above is case sensetive. Would it be possible to make it case insensitive by adding the ‘i’ character to the regex? It’s not completely easy to follow what’s happening. =)

Anatoly Mironov — 2014-09-02

Thank you for the feedback. This js code is not simple, but it is well-tuned. I took it from stackoverflow. This solution is case sensitive. If you have a solution for getting query string parameters in a case-insensitive way, I’d be thankful to get an updated version of this code.

Johannes Milling — 2014-09-03

Without changing the regex, a solution could be to simply call toLowerCase() on the key parameter and window.location.search. But that might not be the optimal solution. My guess is that making the regex case insensitive would get better performance, but I have no understanding of regex. =P if (!window.location.getParameter ) { window.location.getParameter = function(key) { function parseParams() { var params = {}, e, a = /\+/g, // Regex for replacing addition symbol with a space r = /([^&=]+)=?([^&]*)/g, d = function (s) { return decodeURIComponent(s.replace(a, " “)); }, q = window.location.search.toLowerCase().substring(1); while (e = r.exec(q)) params[d(e[1])] = d(e[2]); return params; } if (!this.queryStringParams) this.queryStringParams = parseParams(); return this.queryStringParams[key.toLowerCase()]; }; }

Anatoly Mironov — 2014-09-03

Thank you Johannes! I’ll update the code in my blog post.