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.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: