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.&nbsp;
In this article, we're going to look at the ways to read and manipulate query strings and URLs using <code>URL</code> and <code>URLSearchParams</code> APIs of Javascript at the client or more specifically in the browser.
In the browser, there's a global variable called <code>location</code> or <code>window.location</code> 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 <code>URL</code> and <code>URLSearchParams</code> APIs at our disposal in JavaScript.&nbsp;
Let's get into more details of these JavaScript APIs.
<h2 style="text-align: center;">How to use URL API in JS?</h2>
A <code>URL</code> constructor is used to construct, normalize, parse and encode URLs. It provides various properties to read and manipulate the components of a URL.
<code>URL</code> takes an absolute URL string as an argument and returns an object with various properties to read and manipulate the passed URL.&nbsp;
Let's understand this <code>URL</code> by using a sample URL with query params.
<pre class="language-javascript"><code>const parsedUrl = new URL('https://example.com/?name=John Smith&amp;age=25&amp;id=101');
console.log(parsedUrl); // https://example.com/?name=John%20Smith&amp;age=25&amp;id=101</code></pre>
In the above code, we can see that <code>URL</code> could parse the supplied URL string correctly. The <code>parsedUrl</code>&nbsp;can be used as a string directly anywhere we want or we can use the various properties and methods attached to it by the <code>URL</code> class.
<code>URL</code> has got most of the properties similar to the <code>window.location</code> object which includes <code>host</code>, <code>hostname</code>, <code>href</code>, <code>origin</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, <code>searchParams</code>, <code>username</code>, <code>password</code> etc.&nbsp;
<pre class="language-javascript"><code>const url = new URL('https://example.com:8080/blog/?name=John Smith&amp;age=25&amp;id=101#heading');

url.host // example.com:8080
url.hostname // example.com
url.href // https://example.com:8080/blog/?name=John%20Smith&amp;age=25&amp;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&amp;age=25&amp;id=101
url.searchParams // URLSearchParams {}</code></pre>
So by using <code>URL</code> API we can get various types of info about the URL link that we pass.
If you observe the prop <code>url.searchparams</code> is actually returning the <code>URLSearchParams</code> 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 <code>URL</code> API.
<pre class="language-javascript"><code>const newUrl = new URL('https://john:somePass@dev.example.com/api/test');
console.log(newUrl.username); // john
console.log(newUrl.password); // somePass</code></pre>
To modify any of the props we can just simply assign any valid value to it.&nbsp;
<pre class="language-javascript"><code>const url = new URL('https://example.com:8080/blog/?name=John Smith&amp;age=25&amp;id=101#heading');

url.href = 'https://abc.com';
url.pathname = 'about';
url.hash = '#important';
url.search = '?name=Bond&amp;age=20';
console.log(url); // https://abc.com/about?name=Bond&amp;age=20#important

url.origin = 'https://aaa.com:7777'; // Error: Cannot set property origin</code></pre>
You can set or modify any of the properties of <code>url</code> except <code>origin</code> and <code>searchParams</code> if you try, an error will be thrown.&nbsp;
<h2 style="text-align: center;">How to use URLSearchParams in JS?</h2>
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 <code>URLSearchParams</code> constructor.&nbsp;
<code>URLSearchParams</code> 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 <code>URLSearchParams</code> it will clip off the inital param after <code>?</code>. 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.
<pre class="language-javascript"><code>const link = 'https://example.com/blog?name=john&amp;age=25&amp;id=101&amp;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&amp;age=25&amp;id=101&amp;name=smith
searchParams.append('place', 'Munich'); // Adding a new query param
searchParams.set('id', '222'); // Updating the id to 222
searchParams.toString(); // name=john&amp;age=25&amp;id=222&amp;name=smith&amp;place=Munich
searchParams.delete('place'); 
searchParams.toString(); // name=john&amp;age=25&amp;id=222&amp;name=smith</code></pre>
There are other methods like <code>keys</code>, <code>values</code>, <code>entries</code> and <code>forEach</code>(iterates over the values) to iterate the search params.&nbsp;
Other than <code>forEach</code> 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.&nbsp;
<pre class="language-javascript"><code>const searchParams = new URLSearchParams('name=john&amp;age=25&amp;id=101');

searchParams.forEach(v =&gt; console.log(v)); // john 25 101
Array.from(searchParams.keys()).forEach(k =&gt; console.log(k)); // name age id
Array.from(searchParams.values()).forEach(v =&gt; console.log(v)); // john 25 101
Object.fromEntries(searchParams.entries()); // {name: "john", age: "25", id: "101"}</code></pre>
In the above code snippet for the methods <code>keys</code>, <code>values</code> and <code>entries</code> we converted them to arrays and object to see the results.
Now if we go back to the <code>URL</code> API methods, we have <code>searchParams</code> method there, using that we can get all the details that we could get using <code>URLSearchParams</code> except that we cannot set any query parameters from there.&nbsp;
<pre class="language-javascript"><code>const url = new URL('https://example.com/?name=John Smith&amp;age=25&amp;id=101');
url.searchParams.get('name') // John Smith
url.searchParams.has('age') // true
url.searchParams.toString() //name=John+Smith&amp;age=25&amp;id=101
url.searchParams.forEach(i=&gt; console.log(i)) //John Smith 25 101
Object.fromEntries(url.searchParams.entries()) // {name: "John Smith", age: "25", id: "101"}</code></pre>
<blockquote>
Using <code>URL</code> we can pass full URL address and can still read the correct query params unlike <code>URLSearchParams</code> where we need to pass only the query string to read the correct query parameters data.
</blockquote>
So that's all about <code>URL</code> and <code>URLSearchParams</code> 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 <code>URL</code> API.

Learn to use URL and URLSearchParams in Javascript and understand the difference between these two APIs. URLSearchParams is a special case of URL API.

Posts tagged with Query-Strings

How to use URL & URLSearchParams in JS to read and manipulate URLs