The "query string" is a way to embed variables in a URL. For example, if you search for "test" in Yahoo!, you might see a URL like this:
http://search.yahoo.com/search?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701
The query string is everything after and including the question mark, in this case
?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701. As you can see,
the query string contains key-value pairs, split by ampersands (&).In PHP you can
easily grab those values using the built-in $_GET superglobal:
// assume the same query string as above: ?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701
echo $_GET['p']; // test
echo $_GET['toggle']; // 1
echo $_GET['cop']; // mss
echo $_GET['invalid']; // null or empty, no such key exists
JavaScript sees the query string as a plain string, called window.location.search.
While there are many methods out there to parse location.search and make its
key-value pairs available, I feel that most of them are overkill for what should be simple
behavior.
// JavaScript equivalent of PHP's $_GET superglobal
function $_GET(key) {
try {
return window.location.search.match(new RegExp('[\?&]' + key + '=([^]+)'))[1];
} catch (err) {
return '';
}
}
alert( $_GET('p') ); // test
alert( $_GET('toggle') ); // 1
alert( $_GET('cop') ); // mss
alert( $_GET('invalid'); // empty string '', no such key exists
Notice that the JavaScript requires parentheses: $_GET('p'), while
PHP requires brackets: $_GET['p']. This is because the JavaScript
version is a function, while the PHP version is an array. To avoid the confusion you could parse
out every variable on page load and store it in a single array, but I find this method suitable
enough for my own needs. Hope you find it useful!
I'm a Senior Culinary Software Developer at Yummly working on various front-end and middle-tier tasks, primarily using JavaScript. I blog about web design and development topics including accessibility, usability, performance, and developing HTML / CSS / JavaScript applications on Appcelerator Titanium and Adobe AIR.
If you're a web developer, you might enjoy Jelo, my JavaScript library.
All original work on this site is covered by a Creative Commons Attribution 3.0 license unless otherwise specified.
You may share or use any code or images from this site in any manner, for free, so long as reasonable effort has been made to give credit where due.
The views expressed in the posts and comments on this blog do not necessarily reflect those of my current or former employers.