Get and set URL parameter in vanilla JavaScript Vanilla JS
URL query parameters are key value pairs that come after a question mark ? at the end of a URL and can be used for things like tracking referral traffic, performing searches, and filtering results. You can get a query parameter from a URL and add a parameter to a URL with JavaScript. Here is how to get and set URL parameters in vanilla JavaScript.
Get query string from URL in vanilla JavaScript
The first thing to do when trying to get a parameter from a URL is to get the entire query string from the URL. This will include all parameters in the url including the keys and values. You can get the query string of a URL with window.location.search.
For a URL with the parameters 'category=something' and 'sort-by=price-low-to-high', window.location.search will return '?category=something&sort-by=price-low-to-high' which is the same as what the user sees at the end of the URL.
Get URL parameter in vanilla JavaScript
You can get a query parameter from a URL using the URLSearchParams interface, which provides methods for working with the query string of a URL.
URLSearchParams is a contructor so you need to use the new operator to use it and when you do, you can pass in the query string using window.location.search.
After that, you can call several methods on the result and in this case to get a URL parameter you'll use the .get() method.
let category = params.get('category');
With the same example parameters as above including 'category=something', using .get('category') on this params object returns 'something', which is the value associated with the key 'category' that was provided to the .get() method. In this example that value is then stored directly in a variable named 'category'.
If you want to loop through all of the parameters, you can use .forEach() on the params object.
params.forEach(function(value, key) {
console.log(value, key);
});
Add parameter to URL in vanilla JavaScript
To add a parameter to a URL, you'll use URLSearchParams again but this time you'll use a different method on the returned object.
Once you've created your URLSearchParams object, you can call .set() and pass in both the key and associated value you want to assign as a new parameter.
But just using .set() doesn't actually update the URL, it just sets the value in your params object. To update the URL with the added parameter, you need to re-assign the value of window.location.search to your params object.
params.set('category', 'something');
window.location.search = params;
There is another method for adding parameters called .append() but if you try to update an existing parameter with .append() it won't update it and it will instead add another parameter of the same name/key. Whereas .set() will replace existing parameters when adding one with the same key.
Delete parameter from URL in vanilla JavaScript
To delete a parameter from a URL, use the .delete() method on the params object you create with URLSearchParams. This will delete all instances of the specified parameter from your params object. Simlarly to .set(), this won't actually change the URL itself, you then need to re-assign window.location.search the value of your updated params object.
params.delete('category');
window.location.search = params;
Learn more about URLSearchParams on MDN
Thanks for reading.
Ryan
Published on 24 Aug 2022