How To Get Parameters From URL With JavaScript

We previously went through how to update URL parameters without refreshing the browser.

Now let's go through the other side of that process.

How to get parameters from the URL using JavaScript: To get the parameters from the URL with JavaScript you need to pull in the URL and strip out the parameters using RegExp. Then split the parameters into their individual parameters using split, based on "&" or "&". Finally, split the parameters and their values by "=" and put the parameters and values into an array.

We're basically trying to replicate PHP's $_GET global variable.

Here's my version of the function that does this:

function parameters() {
  let url = window.location.href;
  let paramString = new RegExp('(.*)[?](.*)').exec(url);
  if (null == paramString) {
    return {'base': url, 'params': null};
  }

  if (paramString[2].includes("&")) {
    var paramList = paramString[2].split("&");
  } else {
    var paramList = paramString[2].split("&");
  }

  let params = [];

  for (let i = 0; i < paramList.length; i++) {
    let values = paramList[i].split("=");
    params[values[0]] = values[1];
  }
  return {"base": paramString[1], "params": params};
}

Let's go through it.

Pull in and split the URL

We use a basic window.location.href to grab the URL along with all the parameters, if any.

We split it apart using RegExp with this line:

new RegExp('(.*)[?](.*)').exec(url);

This says to look for the pattern in the URL. If it finds something, it will return an array. If it doesn't find that pattern, it will return null.

The pattern is

(.*)[?](.*)

This means find anything, then a question mark, then anything.

There are a number of ways you could write this to achieve a similar result. The reason I did it this way is so that I can store the base URL (the part before the question mark) as well as the list of parameters (the part after the question mark).

You could write a more fancy regex at this stage that tests for multiple parameters, but I prefer to do that processing after the program has let me know there's at least some parameters to work on.

if (null == paramString) {
  return {'base': url, 'params': null};
}

If the regex pattern didn't match, I want to send back the base url and let the rest of the program know that there are no parameters.

If you don't need that, you can just return false at this point.

Split multiple parameters apart

There are two ways the parameters could be combined. They could be joined using "&" or using "&". I'm not going to get into the debate about whether or not you should always use & - we'll just write code that works with both.

if (paramString[2].includes("&")) {
  var paramList = paramString[2].split("&");
} else {
  var paramList = paramString[2].split("&");
}

Due to the way we setup the regex in the previous step, paramString[1] will be the base URL and paramString[2] will be any parameters.

You can probably guess what this part does.

If the list of parameters includes & then split it according to that. Otherwise, split it by &.

This puts the parameter list into paramList as an array, even if there is only one parameter.

Split the parameters into their values

Next we're going to run through all the parameters in paramList and split them into an array of their names and values.

let params = [];

for (let i = 0; i < paramList.length; i++) {
  let values = paramList[i].split("=");
  params[values[0]] = values[1];
}

We setup an empty params array.

We loop through each of the paramList items, splitting them by the equals sign.

The values variable will contain the name of the parameter in values[0] and the value of the parameter in values[1].

We put those elements into the params array as new entries.

Return the results

Finally, we return the results of our calculations.

return {"base": paramString[1], "params": params};

You could just return params, but I need the base URL as well, so that I can rebuild the URL with the parameters after I've made changes in another part of the program.

This will return an array with base being the URL of the page the user is on and params being an array of the parameters.