How Can I Get Query String Values in JavaScript?

Problem Statement

Retrieving query string values from a URL is a common task in web development. Query strings are key-value pairs appended to a URL after a ?, used for passing dynamic data. Extracting this data is essential for building JavaScript applications that rely on URL parameters.

Solution Code

Modern Approach: Using URLSearchParams

The URLSearchParams API provides a clean and efficient way to access query string values.

const urlParams \= new URLSearchParams(window.location.search);  
const myParam \= urlParams.get('myParam');  
console.log(myParam); // Outputs the value of 'myParam'

Handling Repeated Keys:
URLSearchParams also supports repeated keys in query strings, like ?param=1&param=2.

const allValues \= urlParams.getAll('param');  
console.log(allValues); // \['1', '2'\]

Highlights:

• Efficiency: URLSearchParams is a native API optimized for parsing query strings.
• Readability: Code is concise and intuitive.
• Versatility: Provides methods like .getAll() for repeated keys and .entries() for iterating over all key-value pairs.

Learn More

Additional Ways to achieve this are shown below.

1. Proxy with URLSearchParams (Advanced)

Use a Proxy to access query parameters like object properties.

const params \= new Proxy(new URLSearchParams(window.location.search), {  
  get: (searchParams, prop) \=\> searchParams.get(prop),  
});  
console.log(params.myParam); // Access as a property

Note: While this simplifies access, it sacrifices iteration capabilities.

2. Manual Parsing with Regular Expressions

For greater control over parsing, regex can extract query string values.

function getParameterByName(name, url \= window.location.href) {  
  name \= name.replace(/\[\\\[\\\]\]/g, '\\\\$&');  
  const regex \= new RegExp(\`\[?&\]${name}(=(\[^&\#\]\*)|&|\#|$)\`),  
        results \= regex.exec(url);  
  return results ? decodeURIComponent(results\[2\].replace(/\\+/g, ' ')) : null;  
}  
console.log(getParameterByName('myParam'));

3. Using an ES6 Functional Approach

Convert query strings into objects using a functional programming style.

const getQueryStringParams \= (query) \=\> query  
  ? (/^\[?\#\]/.test(query) ? query.slice(1) : query)  
      .split('&')  
      .reduce((params, param) \=\> {  
        const \[key, value\] \= param.split('=');  
        params\[key\] \= value ? decodeURIComponent(value.replace(/\\+/g, ' ')) : '';  
        return params;  
      }, {})  
  : {};

const params \= getQueryStringParams(window.location.search);  
console.log(params.myParam);

4. Legacy Method

A self-invoking function for environments lacking modern JavaScript features.

const qs \= ((a) \=\> {  
  if (\!a) return {};  
  return a.split('&').reduce((acc, item) \=\> {  
    const \[key, value\] \= item.split('=');  
    acc\[key\] \= value ? decodeURIComponent(value.replace(/\\+/g, ' ')) : '';  
    return acc;  
  }, {});  
})(window.location.search.substr(1));  
console.log(qs.myParam);

Summary

• Recommended Approach: Use URLSearchParams for its simplicity and modern syntax.
• Custom Parsers: Helpful for handling unique edge cases or legacy environments.
• Efficiency vs. Usability: While URLSearchParams is convenient, functional or regex-based methods can offer performance advantages in specific scenarios.

References

• MDN Web Docs: URLSearchParams

Quick Recap of Query String Handling in JavaScript: Techniques for URLSearchParams, Regex, and More

Thank you for taking the time to read this article on how to get query string values in JavaScript. We hope this guide has provided you with a clear understanding of different methods to extract URL parameters, from using the modern URLSearchParams API to more traditional techniques like regular expressions and functional programming approaches. By mastering these techniques, you can enhance your web development skills and build dynamic applications with ease.

For those eager to expand their knowledge, we recommend checking out the following related topics in the future:

• Encoding and Decoding Query Parameters: Learn how to handle special characters effectively.
• Error Handling in Query Strings: Best practices for managing malformed or incomplete query strings.
• Modifying Query Strings Dynamically: Methods to add, update, or remove query parameters.
• Working with Nested Query Parameters: Techniques for parsing complex query strings.
• Security Considerations: Best practices for handling untrusted query parameters securely.
• SEO and Query Strings: The impact of query strings on search engine optimization.
• Browser Compatibility: Addressing limitations in older browsers.

As you continue exploring web development, always remember that mastering core concepts like URL parameter handling opens doors to building more interactive and user-centric applications. Keep experimenting with different methods, as each has its own use cases and advantages. Whether you're a beginner or an experienced developer, enhancing your JavaScript skills will always bring new opportunities for growth. Keep coding and building amazing things!

Compiled by team Crio.Do