We use cookies to ensure that we give you the best experience on our website.

Get Query String Values from a URL in JavaScript

How to Get Query String Values from a URL in JavaScript?

When building web applications, you often need to extract information from the URL, such as query string parameters.

JavaScript provides two primary methods for retrieving query string values from a URL: using the URLSearchParams object and manually parsing the URL. In this article, we’ll explore both methods in detail.

Method 1: Using URLSearchParams

The URLSearchParams object is a built-in JavaScript API that simplifies the task of working with query strings. It provides an easy way to parse and retrieve query parameters from a URL. Here’s how to use it:

// Example URL: https://example.com/page?name=John&age=30

// Create a URLSearchParams object from the current URL
const urlSearchParams = new URLSearchParams(window.location.search);

// Retrieve query string values
const name = urlSearchParams.get('name'); // 'John'
const age = urlSearchParams.get('age');   // '30'

In this example, we create a URLSearchParams object from the current URL using window.location.search. Then, we use the get() method to retrieve specific query string values based on their keys.

Advantages of using URLSearchParams:

  • It handles URL encoding and decoding automatically.
  • It provides a clean and convenient API for working with query strings.
  • It’s available in modern browsers and Node.js environments.

Alternative Code Syntax:

// Example URL: https://example.com/page?name=John&age=30

const url = new URL(window.location.href);
const urlSearchParams = url.searchParams;

const name = urlSearchParams.get('name'); // 'John'
const age = urlSearchParams.get('age');   // '30'

Method 2: Parsing the URL Manually

If you prefer to parse the URL manually, JavaScript’s built-in functions can help you achieve this. Here’s a step-by-step guide:

// Example URL: https://example.com/page?name=John&age=30

// Get the query string portion of the URL
const queryString = window.location.search;

// Remove the leading "?" character
const queryStringWithoutQuestionMark = queryString.slice(1);

// Split the query string into an array of key-value pairs
const queryParamsArray = queryStringWithoutQuestionMark.split('&');

// Create an object to store key-value pairs
const queryParams = {};

// Iterate through the array and store the key-value pairs in the object
queryParamsArray.forEach((pair) => {
  const [key, value] = pair.split('=');
  queryParams[key] = decodeURIComponent(value);
});

// Retrieve query string values
const name = queryParams['name']; // 'John'
const age = queryParams['age'];   // '30'

In this approach, we start by extracting the query string from the URL, removing the leading “?” character, and splitting the query string into an array of key-value pairs.

Then, we create an object to store these pairs and iterate through the array to populate the object.

Finally, you can access the query string values by accessing the object’s properties.

Advantages of parsing the URL manually:

  • It provides full control over the parsing process.
  • It allows for customization and handling special cases.

Retrieving query string values from a URL is a common task in web development, and JavaScript offers multiple methods to accomplish it. You can choose the method that best fits your project’s requirements and coding style. Whether you opt for the simplicity of URLSearchParams or the flexibility of manual parsing, both approaches allow you to access and use query string parameters effectively in your JavaScript applications.

Related Posts