How to parse a URL query parameters in javascript

To parse the URL query parameters in Javascript, we can use the URLSearchParams interface, which has some utility functions that allow us to easily parse/build URLs.

Examples

To parse URL query parameters, we need to do the following:

1. Read the webpage search query (i.e: window.location.search).
2. Remove the query question mark if it exists.
3. Initiate a new object that reference URLSearchParams.
4. Pass the page URL to URLSearchParams.

// Getting the page href
const pageHref = "?page=1&query=javascript";

// Construct a new object and pass the page href to URLSearchParams
const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf('?')));

console.log(searchParams);
// Output:
// URLSearchParams { 'page' => '1', 'query' => 'javascript' }

---

How to Read specific parameter value

The method get() allows us to retrieve any parameter value if it exists in the url search query, as shown below:

// Getting the page href
const pageHref = "?page=1&query=javascript";

// Construct a new object and pass the page href to URLSearchParams
const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf('?')));

const pageNumber = searchParams.get('page');
console.log('Page Number: ', pageNumber);
// Output:
// Page Number:  1

---

How to Check if the search query has a specific parameter

We can use the method has() to check if the search query has a specific parameter, as shown below:

// Getting the page href
const pageHref = "?page=1&query=javascript";

// Construct a new object and pass the page href to URLSearchParams
const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf('?')));

console.log('Has `query` parameter?', searchParams.has('query'));
// Output:
// Has `query` parameter? true

---

How to Sort URL search parameters

To sort the URL search parameters, we can call the method sort() on the searchParams object as shown below:

// Getting the page href
const pageHref = "?ref=google&query=javascript&page=1";

// Construct a new object and pass the page href to URLSearchParams
const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf('?')));
searchParams.sort()

console.log('Sorted searchParams: ',searchParams );
// Output:
// Sorted searchParams:  URLSearchParams { 'page' => '1', 'query' => 'javascript', 'ref' => 'google' }

---

Other useful methods to deal with URLSearchParams can be found on the following link.

Photo from Unsplash.