Working with URLs and query parameters is a common task in web development. In this blog post, we will explore how to extract and manipulate query parameters using JavaScript. Query parameters are the key-value pairs that follow the “?” symbol in a URL. They are often used to pass data between different pages or to filter results of an API request.
Extracting Query Parameters from a URL
Let’s start by extracting the query parameters from a given URL. We’ll use the window.location.search property to get the query string, which includes the “?” character and all key-value pairs:
Note: If you want to extract the query parameters from a URL other than the current page’s URL, you can use the URL class to create a new URL object and manipulate it as needed.
Here’s an example using window.location.search:
const queryString = window.location.search; console.log(queryString);
This will log the entire query string, including the “?” character. To convert this string into an object that is easier to work with, we can use the URLSearchParams class:
const urlParams = new URLSearchParams(queryString);
Working with URLSearchParams
The URLSearchParams class provides various methods to work with query parameters more easily. Let’s take a look at some common use cases:
Getting the Value of a Query Parameter
To get the value of a specific query parameter, use the get() method:
const value = urlParams.get('key');
console.log(value);
This code snippet will log the value of the ‘key’ query parameter if it exists, or null if it doesn’t.
Checking if a Query Parameter Exists
To check if a query parameter exists, use the has() method:
const hasKey = urlParams.has('key');
console.log(hasKey);
This code snippet will log true if the ‘key’ query parameter exists, or false if it doesn’t.
Iterating Over Query Parameters
To iterate over all query parameters, use the forEach() method:
urlParams.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
This code snippet will log each key-value pair in the query string.
Modifying Query Parameters
You can also use URLSearchParams to modify query parameters. For example, to add or update a query parameter, use the set() method:
urlParams.set('newKey', 'newValue');
And to delete a query parameter, use the delete() method:
urlParams.delete('keyToDelete');
After modifying the query parameters, you can update the browser’s URL using the history.pushState() or history.replaceState() methods:
const newQueryString = urlParams.toString();
history.pushState(null, '', `?${newQueryString}`);
In this example, the pushState() method adds a new entry to the browser’s history, whereas the replaceState() method would replace the current entry with the updated URL.
Conclusion
In this blog post, we’ve covered how to extract and manipulate query parameters in JavaScript using the window.location.search property and the URLSearchParams class. These tools make it easy to work with query parameters and update the browser’s URL as needed.