Just about every server language out there allows you to work with URL parameters. Surprisingly JavaScript doesn’t have a straight forward way to do this that’s full accepted by all browsers. This simple function will allow you to parse URL parameters with JavaScript, returning a JSON object of all parameters and values or retrieving a single value.

2020 Approach

This is the latest approach I use to capture the value of a URL parameter with JavaScript.

/**
 * JavaScript Get URL Parameter
 *
 * @param String prop The specific URL parameter you want to retreive the value for
 * @return String|Object If prop is provided a string value is returned, otherwise an object of all properties is returned
 */
function getUrlParam(prop) {
  // No parameters
  if (location.search === "") return null;

  const search = location.search.substring(1);

  // Multiple parameters
  if (search.includes("&")) {
    const params = new URLSearchParams(search);
    return params.get(prop);
  }

  // Single parameter
  const parts = search.split("=");
  const key = parts[0];
  const val = parts[1];

  if (key === prop) {
    return val;
  }

  return null;
}

2017 Approach

This is the best approach I’ve found as of 2017 in that it’s simple, effective and flexible. You can return all GET parameters as a JSON object, or an individual parameter by passing an optional prop value to the function

/**
 * JavaScript Get URL Parameter
 * 
 * @param String prop The specific URL parameter you want to retreive the value for
 * @return String|Object If prop is provided a string value is returned, otherwise an object of all properties is returned
 */
function getUrlParams( prop ) {
    var params = {};
    var search = decodeURIComponent( window.location.href.slice( window.location.href.indexOf( '?' ) + 1 ) );
    var definitions = search.split( '&' );

    definitions.forEach( function( val, key ) {
        var parts = val.split( '=', 2 );
        params[ parts[ 0 ] ] = parts[ 1 ];
    } );

    return ( prop && prop in params ) ? params[ prop ] : params;
}

Regex Approach

// Parse URL Queries Method
(function($){
    $.getQuery = function( query ) {
        query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var expr = "[\\?&]"+query+"=([^&#]*)";
        var regex = new RegExp( expr );
        var results = regex.exec( window.location.href );
        if( results !== null ) {
            return results[1];
            return decodeURIComponent(results[1].replace(/\+/g, " "));
        } else {
            return false;
        }
    };
})(jQuery);

// Document load
$(function(){
    var test_query = $.getQuery('test');
    alert(test_query); // For the URL /?test=yes, the value would be "yes"
});

Advanced Approach

The jQuery URL Parser written by Mark Perkins takes things into more depth, and I recommend it for advanced scenarios where the url_query() function doesn’t quite work.

Here’s an example of how the the URL /ibm-watson/?jennings=done&rutter=done&humanrace=next

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>
<script type="text/javascript">
$(function(){
    $.url.attr('protocol') // Protocol: "http"
    $.url.attr('path') // host: "www.kevinleary.net"
    $.url.attr('query') // path: "/ibm-watson/"
    $.url.attr('jennings') // query: "done"
    $.url.attr('rutter') // query: "done"
    $.url.attr('humanrace') // query: "next"
});
</script>

Alternative Regex Approach

If all you need is the value of a specific querystring there’s no reason to use jQuery. The following function will allow you to easily work with URL queries in JavaScript.

// Parse URL Queries
function url_query( query ) {
    query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var expr = "[\\?&]"+query+"=([^&#]*)";
    var regex = new RegExp( expr );
    var results = regex.exec( window.location.href );
    if ( results !== null ) {
        return results[1];
    } else {
        return false;
    }
}

// Example usage - /?load=yes
var url_param = url_query('load');
if( url_param ) {
    alert(url_param); // "yes"
}

Have questions? Let me know, I’m happy to help.