How Can I Get Query String Values in Javascript?

When working with JavaScript, it is often necessary to retrieve the values from the query string of a URL. The query string is the part of the URL that comes after the question mark (?) and contains key-value pairs separated by ampersands (&).

There are several ways to get query string values in JavaScript. Let’s explore some of the most commonly used methods:

Method 1: Using the URLSearchParams API

The URLSearchParams API provides a convenient way to parse and manipulate query string parameters. It is supported in all modern browsers.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
console.log(myParam);

This code snippet creates a new URLSearchParams object using the window.location.search property, which contains the query string of the current URL. The get() method is then used to retrieve the value of a specific parameter, in this case, myParam.

Method 2: Using Regular Expressions

If you prefer a more manual approach, you can use regular expressions to extract query string values. This method gives you more flexibility but requires a deeper understanding of regular expressions.

function getQueryParam(param) {
  const regex = new RegExp('[?&]' + param + '=([^&#]*)');
  const results = regex.exec(window.location.search);
  return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
}

const myParam = getQueryParam('myParam');
console.log(myParam);

This code defines a function getQueryParam() that takes a parameter name as an argument. It uses a regular expression to match the parameter name followed by an equals sign (=) and captures the corresponding value. The decodeURIComponent() function is then used to decode the value and replace any plus signs (+) with spaces.

Method 3: Using the split() method

If you prefer a simpler approach, you can use the split() method to split the query string into an array of key-value pairs, and then loop through the array to find the desired value.

function getQueryParam(param) {
  const queryString = window.location.search.substr(1);
  const params = queryString.split('&');
  
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (pair[0] === param) {
      return decodeURIComponent(pair[1].replace(/+/g, ' '));
    }
  }
  
  return '';
}

const myParam = getQueryParam('myParam');
console.log(myParam);

This code defines a function getQueryParam() that takes a parameter name as an argument. It first removes the question mark (?) from the query string using the substr() method. Then, it splits the remaining string into an array of key-value pairs using the split() method. Finally, it loops through the array to find the desired parameter and return its value.

These are three of the most commonly used methods to get query string values in JavaScript. Choose the one that best suits your needs and integrate it into your code to retrieve query string values effortlessly.