Get Url Parameters


 / Published in: JavaScript
 

Read a page's GET URL variables and return them as an "associative array."

Calling the function while at example.html?foo=asdf&bar=jkls sets map['foo']='asdf' and map['bar']='jkls'

  1. function getUrlVars() {
  2. var map = {};
  3. var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  4. map[key] = value;
  5. });
  6. return map;
  7. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: aoit on February 15, 2010

I have posted this code to my site, but can't see the data passed to the page. I have tried using a document.write (map['a']);

and alert (a)

using the variable a and b in the url with data of john and jones respectively.

I have put these lines of code in the function, at the end, and in a separate script, but can't get the data displayed on the page or on an alert.

Thank you for the help.

Posted By: nathanbrauer on June 29, 2010

function getUrlVars() { var map = {}; var parts = window.location.search.replace(/[?&]+([^=&]+)(=[^&]*)?/gi, function(m,key,value) { map[key] = (value === undefined) ? true : value.substring(1); }); return map; }

Here's an improvement on this code. Now it will allow for valueless keys. Any keys which are present but have no value will be set to true.

Posted By: nathanbrauer on June 29, 2010

(it was better spaced/indented before I hit submit)

Posted By: lazfsh on January 29, 2011

Is there a way to modify this script, like maybe with a for loop, to change each variable so that foo=map['foo'] basically I want to use the variables in the rest of my code without typing the map['foo'] part.

Posted By: lazfsh on February 2, 2011

FIgured it out:

for (var key in map)
{
    window[key] = map[key];
}

untested. Thanks SO

Posted By: lazfsh on February 3, 2011

Couldn't get that to work. Maybe there is something else to it.

Posted By: agdm on February 25, 2011

the properties of "map" are not accessible outside the scope of the function. When I move the declaration for the object outside of the function, its properties are accessible.

// moved outside the function var map = {};

function getUrlVars() { var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { map[key] = value; }); return map; }

// call the function getUrlVars();

// view url parameters console.log(map.param1); console.log(map.param2); console.log(map.param3);

Posted By: agdm on February 25, 2011

My update to this, more concisely explained:
http://snipplr.com/view/49625/mapping-of-url-parameters/

Posted By: Reikooters on April 6, 2011

Yes, the "map" variable is not accessible outside the scope of the function. As it states in the first line, the function returns the variable.

You would use this function, for example:

var stuff = getUrlVars();

and then access the data using stuff['foo']

This does allow for you to do stuff like:

var stuff = getUrlVars(); var stuff2 = getUrlVars();

and have 2 separate variables, each having an associative array of the GET parameters. You may only need to get and use them one time for what you're doing, but either way this allows for you to do it more than once, and be able to name the variable whatever you want. This is just good coding practice imo.

Posted By: Kobee1203 on July 21, 2012

function getUrlParams() { var map = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, function(m,key,value) { map[key] = (value === undefined) ? '' : value; // value.substring(1); }); return map; }

I modified the regex expression to ignore the href tag. Just adding '#' the group for the parameter value.

You need to login to post a comment.