Everything about Query Parameters in JavaScript (also URLSearchParams)

JavaScriptWeb Development

Got inspired to write this article by watching one of videos by DevTips(link).

Following are the techniques used to get key-value pairs from a URL.

Using Regular Expressions (Old-school technique)

A quick google search gave me this result from stack-overflow. This is pretty straight forward. It simply uses RegExp object.

getParameterByName = function (url, name) {
  var results = new RegExp("[?&]" + name + "=([^&#]*)").exec(url);
  if (results == null) {
    return null;
  }
  return decodeURI(results[1]) || 0;
};
document.write(
  " lang: " +
    getParameterByName("https://medium.com?lang=en&browser=firefox", "lang")
);
document.write(
  " browser: " +
    getParameterByName("https://medium.com?lang=en&browser=firefox", "browser")
);

Or checkout the following codepen link

Using a JS Library

You could use a JS library to perform this activity. I found one such library called purl . It’s not maintained actively, but it should get the job done. The last commit to this library happened almost 2 years ago. Here is the link

This library can not just be used for extracting query parameters, but a bunch of other information like — protocol, host, relative path and fragment.

Using URLSearchParams

getParameterByName = function (url, name) {
  if ("URLSearchParams" in window) {
    //Browser supports URLSearchParams
    let searchParams = new URLSearchParams(url.split("?")[1]);
    //return searchParams.get(name);
    return searchParams.get(name);
  } else {
    document.write(
      "Your browser currently doesn't support URLSearchParams. Switch to another browser."
    );
    return null;
  }
};
document.write(
  " lang: " +
    getParameterByName("https://medium.com?lang=en&browser=firefox", "lang")
);
document.write(
  " browser: " +
    getParameterByName("https://medium.com?lang=en&browser=firefox", "browser")
);

Look at the above code, URLSearchParams in window statement is used to check if URLSearchParams is supported by the browser.

Note: Internet Explorer currently doesn’t support this feature.

url.split(‘?’)[1] is used to extract the only the query parameters from the url. For example if the url is —

let url = https://justadummyurl.com?name=medium&age=7

then url.split(‘?’)[1] will return only name=medium&age=7

If you want to extract the query parameters from the url bar then you could use window.location.search.substring(1). This should give you similar result.

Then use the get method of the URLSearchParams to extract the value of the parameter.

Checkout the following code-pen which explains this method - link

URLSearchParams supports a bunch of other features as well.

  • .append() — adds a new query parameter
  • .delete() — removes a query parameter
  • .has() — returns boolean value indicating if the key exists
  • .set() — sets a new value to the key

Conclusion

All methods are useful, but it totally depends on who your target users are. If you want your application to work on every possible browser, then go ahead and use first or the second method.

References

Checkout the following reference links to know more about this topic.