How to Get URL Parameters in JavaScript

In this Javascript tutorial, we'll explore how to extract URL parameters in JavaScript

As a web developer, you may come across a scenario where you need to extract the parameters from a URL.

These parameters can be used for various purposes, such as tracking user behavior, sending data from one page to another, etc.

In this Javascript tutorial, we’ll explore how to extract URL parameters in JavaScript.

What are URL Parameters?

URL parameters, also known as query strings, are the data that is appended to the end of a URL after a question mark (?).

The parameters are key-value pairs that are separated by an ampersand (&).

For example, in the following URL, the parameters are “id” and “name”.

https://www.example.com?id=12345&name=John

Extracting URL Parameters in JavaScript

There are multiple ways to extract URL parameters in JavaScript, and we’ll be covering three of the most popular methods.

Using the URLSearchParams Object

The URLSearchParams object is a built-in JavaScript object that allows you to work with URL parameters.

To use it, you need to pass the search string of a URL to the constructor of the URLSearchParams object.

The search string is the part of the URL after the question mark (?).

const url = new URL('https://www.example.com?id=12345&name=John');
const params = new URLSearchParams(url.search);

Once you have the params object, you can easily access the values of the parameters using the get() method.

const id = params.get('id'); // 12345
const name = params.get('name'); // John

Using the location.search Property

The location object is a built-in JavaScript object that represents the current URL of the page.

You can access the search string of the URL using the location.search property.

const search = location.search;

Next, you need to split the search string into an array of key-value pairs using the split() method.

const params = search.substr(1).split('&');

Finally, you can loop through the array and extract the values of the parameters using the split() method.

let id, name;

for (let i = 0; i < params.length; i++) {
  const pair = params[i].split('=');
  if (pair[0] === 'id') {
    id = pair[1];
  }
  if (pair[0] === 'name') {
    name = pair[1];
  }
}

Using a Custom Function

You can also write a custom function to extract URL parameters in JavaScript.

The function takes the search string of a URL as an argument and returns an object that contains the values of the parameters.

function getParams(search) {
  const params = search.substr(1).split('&');
  const result = {};
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    result[pair[0]] = pair[1];
  }
  return result;
}

You can use the function as follows:

const search = location.search;
const params = getParams(search);
const id = params.id;
const name = params.name;

Conclusion

In this tutorial, we have learned how to extract URL parameters in JavaScript using three different methods.

Whether you use the URLSearchParams object, the location.search property, or a custom function, you can easily extract the values of the parameters from a URL.

These methods can be useful in a variety of web development scenarios, such as tracking user behavior, sending data from one page to another, etc.

Tags

Related Posts