Kevinleary.net, LLC.

Get URL Params JavaScript, Updated 2020

The best way I've found to process URL parameters with JavaScript in the browser.

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.

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 15 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.