How to Get URL Parameters in JavaScript

URL parameters are often used to pass information between different pages in a web application. In JavaScript, you can easily retrieve and work with these parameters to enhance your application's functionality. This article explains how to get URL parameters using different methods in JavaScript.

---

1. Using `window.location.search`

The `window.location.search` property returns the query string part of a URL, including the leading question mark (?). You can then use various methods to extract and work with these parameters.

let queryString = window.location.search;
console.log(queryString); // Output: ?name=John&age=30

This example retrieves the query string from the URL. To work with individual parameters, you can use the following methods.

---

2. Using `URLSearchParams`

The `URLSearchParams` interface provides a more straightforward way to work with query strings. It allows you to easily extract and manipulate URL parameters.

let params = new URLSearchParams(window.location.search);

// Get the value of a specific parameter
let name = params.get("name");
console.log(name); // Output: John

// Check if a parameter exists
let hasAge = params.has("age");
console.log(hasAge); // Output: true

In this example, the `URLSearchParams` object is used to retrieve the value of the name parameter and check if the age parameter exists.

---

3. Looping Through All Parameters

You can loop through all URL parameters using the for...of loop with `URLSearchParams`. This is useful when you need to process multiple parameters:

let params = new URLSearchParams(window.location.search);

for (let [key, value] of params.entries()) {
    console.log(`${key}: ${value}`);
}

// Output:
// name: John
// age: 30

This example loops through all the parameters and logs each key-value pair to the console.

---

4. Converting Parameters to an Object

If you need to work with URL parameters as an object, you can easily convert them using `URLSearchParams`:

let params = new URLSearchParams(window.location.search);
let paramsObj = Object.fromEntries(params.entries());

console.log(paramsObj);
// Output: { name: "John", age: "30" }

This code converts the URL parameters into a plain JavaScript object, which you can then use like any other object in your code.

---

5. Manually Parsing URL Parameters

If you're working in an environment that doesn't support `URLSearchParams`, you can manually parse the query string using basic string manipulation:

function getParams(queryString) {
    let params = {};
    let pairs = queryString.substring(1).split("&");

    for (let pair of pairs) {
        let [key, value] = pair.split("=");
        params[key] = decodeURIComponent(value);
    }

    return params;
}

let params = getParams(window.location.search);
console.log(params);
// Output: { name: "John", age: "30" }

This function manually parses the query string and returns an object containing the parameters and their values.

---

6. Conclusion

Getting URL parameters in JavaScript is a common task in web development. Using `URLSearchParams` provides a modern, easy-to-use API for working with query strings, while manual parsing is useful in environments that lack support for this interface. By understanding these methods, you can effectively manage URL parameters in your applications.