URL Information in JavaScript

Sometimes it is important to get information about the current URL using JavaScript… whether it be the current location, weather a certain query string parameter exists, or just about anything else. It is often the case that you need to know this information on the client-side in your webpage or application.

You could definitely write a bunch of different functions to handle this, but since getting or setting URL-related stuff in JavaScript shares a common area of functionality, it’s probably better to group them all together. For this it is reccomended that we use something like the JavaScript modules approach discussed here. That way we can group everything together.

So below is a starter module called urlInformation. Everything is namespaced to that variable…

var urlInformation = (function () {
    var urlContains = function (pathArray) {
        for (var i = 0; i < pathArray.length; i++) {
            if (window.location.href.indexOf(pathArray[i]) === -1 && window.location.href.indexOf(pathArray[i].toLowerCase()) === -1) {
                return false;
            }
        }
        // did we reach the end? everything passed
        return true;
    };
    var hasParameter = function (name) {
        // Get query string
        fullQString = window.location.search.substring(1);
        paramCount = 0;
        queryStringComplete = "?";
        if (fullQString.length > 0) {
            // Split string
            paramArray = fullQString.split("&");
            //Loop through params, check if parameter exists.  
            for (i = 0; i < paramArray.length; i++) {
                currentParameter = paramArray[i].split("=");
                if (currentParameter[0] == name) //Parameter already exists in current url
                {
                    return true;
                }
            }
        }
        return false;
    };
    var getParameter = function (name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    };
    return {
        getParameter: getParameter,
        hasParameter: hasParameter,
        urlContains: urlContains
    };
})();

As we can see here, we have some methods (psuedomethods really) on this mobile that we can call directly anywhere in our code like so…

urlInformation.getParameter('id');

This will return the value of the “id” parameter that is appended to the query string in the URL ?type=something&id=7.

What’s great about this approach is that we can easily add any methods we want, using any variables we want, and as long as we add it to the return object we are in good shape. For example, we could expand our mobile below and add a hash function that gets the current value of the #hash in the URL…

var urlInformation = (function () {
    var urlContains = function (pathArray) {
        for (var i = 0; i < pathArray.length; i++) {
            if (window.location.href.indexOf(pathArray[i]) === -1 && window.location.href.indexOf(pathArray[i].toLowerCase()) === -1) {
                return false;
            }
        }
        // did we reach the end? everything passed
        return true;
    };
    var hasParameter = function (name) {
        // Get query string
        fullQString = window.location.search.substring(1);
        paramCount = 0;
        queryStringComplete = "?";
        if (fullQString.length > 0) {
            // Split string
            paramArray = fullQString.split("&");
            //Loop through params, check if parameter exists.  
            for (i = 0; i < paramArray.length; i++) {
                currentParameter = paramArray[i].split("=");
                if (currentParameter[0] == name) //Parameter already exists in current url
                {
                    return true;
                }
            }
        }
        return false;
    };
    var getParameter = function (name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    };
    var getHash = function () {
        return window.location.hash;
    };
    return {
        getParameter: getParameter,
        hasParameter: hasParameter,
        urlContains: urlContains,
        getHash: getHash
    };
})();

And then we can call it like so..

urlInformation.getHash();

to get the current hash in the URL.