Rectangle 27 0

javascript jquery get querystring from URL?


// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
http://www.example.com/?me=myValue&name2=SomeOtherValue
var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];
{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

@Rory, yes: This: "stackoverflow.com?foo=bar#topic1 will give you {"foo" : "bar#topic"}. This is why poor guy asked for a well-known library's solution, presumably, hoping to find a solution that had had some testing done on it and covered all the bases (I'm saying that's what he was HOPING to find, not that jQuery would necessarily provide it).

Additionally, it returns an object - JavaScript does not have associative arrays. And opening curly braces should go on the same line as the expression in JavaScript. </superpickycomment>

For example, if you have the URL:

Note that solution doesn't unencode the parameter values ... and doesn't seem to explicitly handle # values in the url either? I'd suggest stackoverflow.com/questions/901115/ instead, like @Steve did

The following code will return a JavaScript Object containing the URL parameters:

and you can do:

Note
Rectangle 27 0

javascript jquery get querystring from URL?


// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
http://www.example.com/?me=myValue&name2=SomeOtherValue
var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];
{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

@Rory, yes: This: "stackoverflow.com?foo=bar#topic1 will give you {"foo" : "bar#topic"}. This is why poor guy asked for a well-known library's solution, presumably, hoping to find a solution that had had some testing done on it and covered all the bases (I'm saying that's what he was HOPING to find, not that jQuery would necessarily provide it).

Additionally, it returns an object - JavaScript does not have associative arrays. And opening curly braces should go on the same line as the expression in JavaScript. </superpickycomment>

For example, if you have the URL:

Note that solution doesn't unencode the parameter values ... and doesn't seem to explicitly handle # values in the url either? I'd suggest stackoverflow.com/questions/901115/ instead, like @Steve did

The following code will return a JavaScript Object containing the URL parameters:

and you can do:

Note
Rectangle 27 0

javascript jquery get querystring from URL?


var queries = {};
  $.each(document.location.search.substr(1).split('&'),function(c,q){
    var i = q.split('=');
    queries[i[0].toString()] = i[1].toString();
  });
  console.log(queries);

Also, can't believe this required 5 lines of javascript to do. What year is it??

An easy way to do this with some jQuery and straight JS, just view your console in Chrome or Firefox to see the output...

Handy! Note that if you want to handle empty/null querystring elements, you'll want to add an 'if (i[0].length > 0)...' block...

You may want to remove + and decodeURIComponent on the way... And use window.location.search instead

You shouldn't split on '=', it's technically okay to have a second equals sign in the value of any key/value pair. -- Only the first equals sign you encounter (per key/value pair) should be treated as a delimiter. (Also, the equals sign isn't strictly required; it's possible to have a key with no value.)

this solution does not take into account arrays in the query, e.g. filters[class]=Gym

Note
Rectangle 27 0

javascript jquery get querystring from URL?


var queries = {};
  $.each(document.location.search.substr(1).split('&'),function(c,q){
    var i = q.split('=');
    queries[i[0].toString()] = i[1].toString();
  });
  console.log(queries);

Also, can't believe this required 5 lines of javascript to do. What year is it??

An easy way to do this with some jQuery and straight JS, just view your console in Chrome or Firefox to see the output...

Handy! Note that if you want to handle empty/null querystring elements, you'll want to add an 'if (i[0].length > 0)...' block...

You may want to remove + and decodeURIComponent on the way... And use window.location.search instead

You shouldn't split on '=', it's technically okay to have a second equals sign in the value of any key/value pair. -- Only the first equals sign you encounter (per key/value pair) should be treated as a delimiter. (Also, the equals sign isn't strictly required; it's possible to have a key with no value.)

this solution does not take into account arrays in the query, e.g. filters[class]=Gym

Note
Rectangle 27 0

javascript jquery get querystring from URL?


location.search

@Cheezmeister: location.search works in Chrome, Firefox and IE10+. Might work in IE9 and lower too, but I don't have one on hand. Dwight: window.location.search returns the query string. Try it on this page in the console and you'll see ?a=b&c=d.

There's still a bit of work to do after location.search is pulled. This is the quickest way to get you halfway there, though. You'll need to drop the "?" and split on the "&", then split each result on "=".

This does not return the search string from a url string. It only returns the current page's current address bar search string value.

Note
Rectangle 27 0

javascript jquery get querystring from URL?


var queries = {};
  $.each(document.location.search.substr(1).split('&'),function(c,q){
    var i = q.split('=');
    queries[i[0].toString()] = i[1].toString();
  });
  console.log(queries);

Also, can't believe this required 5 lines of javascript to do. What year is it??

An easy way to do this with some jQuery and straight JS, just view your console in Chrome or Firefox to see the output...

Handy! Note that if you want to handle empty/null querystring elements, you'll want to add an 'if (i[0].length > 0)...' block...

You may want to remove + and decodeURIComponent on the way... And use window.location.search instead

You shouldn't split on '=', it's technically okay to have a second equals sign in the value of any key/value pair. -- Only the first equals sign you encounter (per key/value pair) should be treated as a delimiter. (Also, the equals sign isn't strictly required; it's possible to have a key with no value.)

this solution does not take into account arrays in the query, e.g. filters[class]=Gym

Note
Rectangle 27 0

javascript jquery get querystring from URL?


location.search

@Cheezmeister: location.search works in Chrome, Firefox and IE10+. Might work in IE9 and lower too, but I don't have one on hand. Dwight: window.location.search returns the query string. Try it on this page in the console and you'll see ?a=b&c=d.

There's still a bit of work to do after location.search is pulled. This is the quickest way to get you halfway there, though. You'll need to drop the "?" and split on the "&", then split each result on "=".

This does not return the search string from a url string. It only returns the current page's current address bar search string value.

Note
Rectangle 27 0

javascript jquery get querystring from URL?


// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
http://www.example.com/?me=myValue&name2=SomeOtherValue
var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];
{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

@Rory, yes: This: "stackoverflow.com?foo=bar#topic1 will give you {"foo" : "bar#topic"}. This is why poor guy asked for a well-known library's solution, presumably, hoping to find a solution that had had some testing done on it and covered all the bases (I'm saying that's what he was HOPING to find, not that jQuery would necessarily provide it).

Additionally, it returns an object - JavaScript does not have associative arrays. And opening curly braces should go on the same line as the expression in JavaScript. </superpickycomment>

For example, if you have the URL:

Note that solution doesn't unencode the parameter values ... and doesn't seem to explicitly handle # values in the url either? I'd suggest stackoverflow.com/questions/901115/ instead, like @Steve did

The following code will return a JavaScript Object containing the URL parameters:

and you can do:

Note
Rectangle 27 0

javascript jquery get querystring from URL?


function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var thequerystring = getParameterByName("location");
$('html,body').animate({scrollTop: $("div#" + thequerystring).offset().top}, 500);

You can use the method to animate:

Note
Rectangle 27 0

javascript jquery get querystring from URL?


function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var thequerystring = getParameterByName("location");
$('html,body').animate({scrollTop: $("div#" + thequerystring).offset().top}, 500);

You can use the method to animate:

Note