Get url parameters with javascript
By Anatoly Mironov
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:
function _spGetQueryParam(p) {ULSA13:; var q=window.location.search.substring(1); if(q && q.length > 2) { var params=q.split(”&"); var l=params.length; for (var i=0;i<l;i++) { var pair=params[i].split("="); if (pair[0].toLowerCase()==p) return pair[1]; } } }
var id = _spGetQueryParam(“ID”); var url = “/Forms/AllItems.aspx?FilterField1=look&FilterValue1=” + id;
## Comments from Wordpress.com
####
[Anatoly Mironov]( "mirontoli@gmail.com") - <time datetime="2012-04-02 14:33:45">Apr 1, 2012</time>
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
var name = _spGetQueryParam(“name”); //bob
<hr />
####
[asleb]( "asle@benoni.no") - <time datetime="2012-04-02 13:52:18">Apr 1, 2012</time>
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.
<hr />
####
[asleb]( "asle@benoni.no") - <time datetime="2012-04-02 13:52:50">Apr 1, 2012</time>
How do I call this function?
<hr />
####
[Johannes Milling](http://discoveringsharepoint.wordpress.com "johannesmilling@hotmail.com") - <time datetime="2014-09-15 16:24:23">Sep 1, 2014</time>
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. =)
<hr />
####
[Anatoly Mironov](http://chuvash.eu "mirontoli@gmail.com") - <time datetime="2014-09-16 10:54:19">Sep 2, 2014</time>
Thank you for the feedback. This js code is not simple, but it is well-tuned. I took it from [stackoverflow](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/3867610#3867610). 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.
<hr />
####
[Johannes Milling](http://discoveringsharepoint.wordpress.com "johannesmilling@hotmail.com") - <time datetime="2014-09-17 12:52:41">Sep 3, 2014</time>
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()\]; }; }
<hr />
####
[Anatoly Mironov](http://chuvash.eu "mirontoli@gmail.com") - <time datetime="2014-09-17 15:22:17">Sep 3, 2014</time>
Thank you Johannes! I'll update the code in my blog post.
<hr />