How can i get query string values in javascript

In JavaScript, retrieving query string values from a URL is a common requirement, especially in web development. Here are several popular and practical methods to retrieve query string values:

1. Using Native JavaScript - URLSearchParams

URLSearchParams is a built-in browser API that provides a straightforward way to retrieve URL query parameters. Assuming the URL is as follows: https://example.com/?product=shirt&color=blue.

javascript
// Assuming the URL is https://example.com/?product=shirt&color=blue
const queryString = window.location.search;

// Using URLSearchParams
const params = new URLSearchParams(queryString);

const product = params.get('product'); // returns 'shirt'
const color = params.get('color'); // returns 'blue'

This method is straightforward and natively supported by modern browsers.

2. Manual Parsing with JavaScript

If you don't want to use URLSearchParams or need more control over the parsing process, you can manually parse the query string:

javascript
function getQueryStringValue(key) {
    const queryString = window.location.search.substring(1); // Get the query string, removing the '?'
    const queries = queryString.split("&"); // Split into an array

    for (let i = 0; i < queries.length; i++) {
        const pair = queries[i].split('='); // Split key and value
        if (decodeURIComponent(pair[0]) === key) {
            return decodeURIComponent(pair[1] || ""); // Return the decoded value if found
        }
    }
    return null; // Return null if the key is not found
}

// Example
const product = getQueryStringValue('product'); // returns 'shirt'
const color = getQueryStringValue('color'); // returns 'blue'

3. Using Third-Party Libraries

For complex URL parsing requirements or when seeking concise code, you can use third-party libraries like query-string.

javascript
// First, install the query-string library
// npm install query-string

import queryString from 'query-string';

const parsed = queryString.parse(window.location.search);
const product = parsed.product; // returns 'shirt'
const color = parsed.color; // returns 'blue'

This method is suitable for complex query string parsing or when the project already includes such libraries.

Conclusion

Choose the appropriate method based on project requirements and browser compatibility. URLSearchParams provides a simple and modern API for handling query strings, while manual parsing offers more control. Third-party libraries are preferred for handling more complex scenarios or when seeking concise code.

Retrieving query string values from a URL in JavaScript can be done in various ways. Here are two commonly used methods:

1. Using the window.location.search property

This is the most direct method to retrieve the query string of the current page. window.location.search returns the string following the ? in the URL, including the ? character.

Example:

javascript
// Assume the current URL is: http://example.com/?product=shirt&color=blue&size=medium

// Retrieve the query string
var queryString = window.location.search;
console.log(queryString); // Output: ?product=shirt&color=blue&size=medium

// Remove the leading question mark
var query = queryString.substring(1);
console.log(query); // Output: product=shirt&color=blue&size=medium

2. Using the URLSearchParams object

URLSearchParams is a practical Web API that provides a set of methods to manipulate query strings within a URL. It can be used in conjunction with window.location.search.

Example:

javascript
// Continue assuming the current URL is: http://example.com/?product=shirt&color=blue&size=medium

// Create a URLSearchParams instance
var searchParams = new URLSearchParams(window.location.search);

// Retrieve specific query parameters
var product = searchParams.get('product');
console.log(product); // Output: shirt

var color = searchParams.get('color');
console.log(color); // Output: blue

var size = searchParams.get('size');
console.log(size); // Output: medium

Handling URLs That Are Not the Current Page

If the URL to be parsed is not the current page's URL, you can directly create a URL object and pass the URL as a parameter, then use URLSearchParams.

Example:

javascript
// Assume another URL
var someUrl = 'http://example.com/?product=shoes&color=red&size=large';

// Create a URL object
var url = new URL(someUrl);

// Create a URLSearchParams instance
var searchParams = new URLSearchParams(url.search);

// Retrieve specific query parameters
var product = searchParams.get('product');
console.log(product); // Output: shoes

var color = searchParams.get('color');
console.log(color); // Output: red

var size = searchParams.get('size');
console.log(size); // Output: large

URLSearchParams provides additional methods such as set, delete, and append, which can conveniently handle query strings. Using URLSearchParams is the recommended approach in modern browsers due to its direct and concise API for manipulating query strings.

These are the two methods for retrieving query strings in JavaScript.