Quick Query String Parsing with JavaScript

Quick Query String Parsing with JavaScript

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