dark

How to Get Query String Values in JavaScript

get query string values in javascript

In web development, a query string is a part of a URL that contains data to be passed to the server. It follows the question mark (?) and is made up of key-value pairs, separated by an ampersand (&). For example, in the URL https://www.example.com/search?q=javascript&limit=10, the query string is q=javascript&limit=10, and the key-value pairs are q=javascript and limit=10.

In JavaScript, there are several ways to get the query string values from a URL.

Using the URLSearchParams API

The URLSearchParams API is a relatively new addition to JavaScript, introduced in ECMAScript 2015 (ES6). It provides a simple way to manipulate the query string parameters of a URL.

Here’s an example of how to use it:

const params = new URLSearchParams(window.location.search);
const q = params.get('q'); // returns 'javascript'
const limit = params.get('limit'); // returns '10'

In this example, we create a new URLSearchParams object using the window.location.search property, which returns the query string of the current URL. We can then use the get() method to retrieve the values of specific parameters by passing in their keys as arguments.

Using Regular Expressions

Another way to get query string values in JavaScript is to use regular expressions. Regular expressions are patterns used to match character combinations in strings.

Here’s an example of how to use regular expressions to get query string values:

const queryString = window.location.search;
const regex = /[?&]([^=#]+)=([^&#]*)/g;
let match;
const params = {};
while ((match = regex.exec(queryString))) {
  params[match[1]] = match[2];
}
const q = params['q']; // returns 'javascript'
const limit = params['limit']; // returns '10'

In this example, we first get the query string of the current URL using the window.location.search property. We then define a regular expression that matches key-value pairs in the query string. We use the exec() method to execute the regular expression on the query string, and loop through the matches to populate a params object with the key-value pairs. Finally, we can retrieve specific values from the params object using their keys.

Using the Split() Method

A third way to get query string values in JavaScript is to use the split() method. This method splits a string into an array of substrings based on a specified separator.

Here’s an example of how to use the split() method to get query string values:

const queryString = window.location.search;
const params = {};
queryString
  .substr(1)
  .split('&')
  .forEach(function(item) {
    const keyValue = item.split('=');
    params[keyValue[0]] = keyValue[1];
  });
const q = params['q']; // returns 'javascript'
const limit = params['limit']; // returns '10'

In this example, we first get the query string of the current URL using the window.location.search property. We then remove the question mark (?) from the beginning of the query string using the substr() method. We split the remaining string into an array of key-value pairs using the split() method, and loop through the array to populate a params object. Finally, we can retrieve specific values from the params object using their keys.

Conclusion

In this article, we explored three different ways to get query string values in JavaScript: using the URLSearchParams API, regular expressions, and the split() method. Each method has its own advantages and disadvantages, and the choice of which method to use depends on the specific requirements of your project. By understanding how to extract query string values in JavaScript, you can create more dynamic and interactive web applications.

Related tutorials