arguments.callee web design & development blog  


Quick Query String Parsing with JavaScript

(skip to the parser)

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!

Tags




blog comments powered by Disqus
search blog
categories & tags
random posts
about hb stone

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.

copyright

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.