Reading and manipulating URLs or query strings is involved in various applications for obtaining data from requests and routing users or requests. Different languages have different ways to deal with query parameters or routing at the backend.
In this article, we're going to look at the ways to read and manipulate query strings and URLs using URL and URLSearchParams APIs of Javascript at the client or more specifically in the browser.
In the browser, there's a global variable called location or window.location using which we can get various details about the URL of your active browser tab. Using location property we can get details like full URL, protocol, host, hostname, port, pathname, search params as a string, etc
But to parse and read any URL other than our active tab address, we have URL and URLSearchParams APIs at our disposal in JavaScript.
Let's get into more details of these JavaScript APIs.
How to use URL API in JS?
A URL constructor is used to construct, normalize, parse and encode URLs. It provides various properties to read and manipulate the components of a URL.
URL takes an absolute URL string as an argument and returns an object with various properties to read and manipulate the passed URL.
Let's understand this URL by using a sample URL with query params.
const parsedUrl = new URL('https://example.com/?name=John Smith&age=25&id=101');
console.log(parsedUrl); // https://example.com/?name=John%20Smith&age=25&id=101
In the above code, we can see that URL could parse the supplied URL string correctly. The parsedUrl can be used as a string directly anywhere we want or we can use the various properties and methods attached to it by the URL class.
URL has got most of the properties similar to the window.location object which includes host, hostname, href, origin, port, protocol, search, searchParams, username, password etc.
const url = new URL('https://example.com:8080/blog/?name=John Smith&age=25&id=101#heading');
url.host // example.com:8080
url.hostname // example.com
url.href // https://example.com:8080/blog/?name=John%20Smith&age=25&id=101#heading
url.origin // https://example.com:8080
url.pathname // /blog/
url.port // 8080
url.protocol // https:
url.hash // #heading
url.search // ?name=John%20Smith&age=25&id=101
url.searchParams // URLSearchParams {}
So by using URL API we can get various types of info about the URL link that we pass.
If you observe the prop url.searchparams is actually returning the URLSearchParams which we are going to see in the next section.
In certain URLs, we have username and password in the URL itself, and such URLs can be parsed easily to get username and password details using this URL API.
const newUrl = new URL('https://john:somePass@dev.example.com/api/test');
console.log(newUrl.username); // john
console.log(newUrl.password); // somePass
To modify any of the props we can just simply assign any valid value to it.
const url = new URL('https://example.com:8080/blog/?name=John Smith&age=25&id=101#heading');
url.href = 'https://abc.com';
url.pathname = 'about';
url.hash = '#important';
url.search = '?name=Bond&age=20';
console.log(url); // https://abc.com/about?name=Bond&age=20#important
url.origin = 'https://aaa.com:7777'; // Error: Cannot set property origin
You can set or modify any of the properties of url except origin and searchParams if you try, an error will be thrown.
How to use URLSearchParams in JS?
In the last section we have seen the ways to read and modify URLs but reading and setting individual URL query strings can be done easily using the URLSearchParams constructor.
URLSearchParams takes the query string of a URL as argument and returns an iterable object with various methods to read and manipulate the query parameters. If you pass a full URL to the URLSearchParams it will clip off the inital param after ?. So it's always good to pass only the query string part of the URL or just pass query string as an object with key value pairs.
const link = 'https://example.com/blog?name=john&age=25&id=101&name=smith';
const url = new URL(link);
const searchParams = new URLSearchParams(url.search); // For active browser link, use location.search
searchParams.get('name'); // john
searchParams.getAll('name'); // ["john", "smith"]
searchParams.has('age'); // true
searchParams.toString(); // name=john&age=25&id=101&name=smith
searchParams.append('place', 'Munich'); // Adding a new query param
searchParams.set('id', '222'); // Updating the id to 222
searchParams.toString(); // name=john&age=25&id=222&name=smith&place=Munich
searchParams.delete('place');
searchParams.toString(); // name=john&age=25&id=222&name=smith
There are other methods like keys, values, entries and forEach(iterates over the values) to iterate the search params.
Other than forEach method all return iterables so array methods like forEach can't be run on those. We need to convert them to an array and use methods like forEach, map etc.
const searchParams = new URLSearchParams('name=john&age=25&id=101');
searchParams.forEach(v => console.log(v)); // john 25 101
Array.from(searchParams.keys()).forEach(k => console.log(k)); // name age id
Array.from(searchParams.values()).forEach(v => console.log(v)); // john 25 101
Object.fromEntries(searchParams.entries()); // {name: "john", age: "25", id: "101"}
In the above code snippet for the methods keys, values and entries we converted them to arrays and object to see the results.
Now if we go back to the URL API methods, we have searchParams method there, using that we can get all the details that we could get using URLSearchParams except that we cannot set any query parameters from there.
const url = new URL('https://example.com/?name=John Smith&age=25&id=101');
url.searchParams.get('name') // John Smith
url.searchParams.has('age') // true
url.searchParams.toString() //name=John+Smith&age=25&id=101
url.searchParams.forEach(i=> console.log(i)) //John Smith 25 101
Object.fromEntries(url.searchParams.entries()) // {name: "John Smith", age: "25", id: "101"}
Using URL we can pass full URL address and can still read the correct query params unlike URLSearchParams where we need to pass only the query string to read the correct query parameters data.
So that's all about URL and URLSearchParams in Javascript. In conclusion what we can infer is in most of the cases to read the query strings we you just need to use URL API.
If you liked this article please give a follow & share. More such interesting articles are on the way.
I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.
Top comments (1)
Nice post! I've written a simple package to handle URLSearchParams with full type-safety called
@search-params/react-> github.com/iamhectorsosa/search-pa....Check it out and let me know what you think. If you find it useful, I'd appreciate a star on GitHub