How can I get query string values in JavaScript?

javascript

query-string

url-search-params

javascript-utility

byAlex Kataev·Aug 25, 2024

Retrieve a query string value directly using URLSearchParams:

// "key" here is your treasure map, "value" is your treasure 🗝️😉
const value = new URLSearchParams(window.location.search).get('key');

Replace 'key' with your desired parameter; value now contains its value.

Detailed solutions for nuanced scenarios

Fetch all query parameters as an object

If you're in need of all query params:

// One line of code, a whole lot of power 💪
const allParams = Object.fromEntries(new URLSearchParams(window.location.search));

This handy object-based approach simplifies parameter iteration.

Direct property access with Proxy

For an enhanced dynamic landscape in your code:

// Let's Proxy our URLSearchParams for an obtuse operation!
const paramProxy = new Proxy(new URLSearchParams(window.location.search), {
  // "It's a kind of magic" - Freddie Mercury and `URLSearchParams`
  get: (searchParams, prop) => searchParams.get(prop),
});

Take note, this "magic" trick disables entries method for iterations.

Going manual with regex for support

When URLSearchParams is unavailable, enter the regex hero:

function seekParam(name, url = window.location.href) {
  // Another regex saved the day! 🦸‍♂️
  const pattern = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp(`[?&]${pattern}(=([^&#]*)|&|#|$)`);
  const results = regex.exec(url);
  return results && results[2] ? decodeURIComponent(results[2].replace(/\+/g, ' ')) : null;
}

This function carefully retrieves a single parameter, accounting for special characters and spaces encoded as '+'.

Edge cases and potential pitfalls

While URLSearchParams is potent, take heed of URL encoding and case sensitivity. Using decodeURIComponent helps to handle raw values accurately.

Digging deeper: alternative approaches and their benefits

Bridging the client-server gap

For languages like PHP, JSON can be an excellent bridge between server-side $_GET processing and JavaScript consumption.

Holistic handling with URL objects

Beyond location.search, consider URL objects for their all-encompassing abilities:

// Turns out you can do a whole lot more with URLs than just clicking them 😉
const url = new URL('https://example.com#dinoLife');
const params = url.searchParams;

Advanced operations using `URLSearchParams`

You gain greater sovereignty over query params:

// Let's go for a walk...through Params Park 🏞️
for (let [key, value] of new URLSearchParams(window.location.search)) {
  console.log(key, value); // Iteration
}

Standard operations like set, delete, and append enhance your control.

Legacy browser support: Polyfills

Older browsers demand extra attention. The URLSearchParams polyfill provides compatibility.

Old school parsing without `URLSearchParams`

Well, nothing beats the good old split method:

// Who knew strings could be split into so many parts!
const pairs = window.location.search.slice(1).split('&');
const params = {};
pairs.forEach(pair => {
  const [key, value] = pair.split('=');
  if (key) params[key] = decodeURIComponent(value);
});

This is a trusty fallback option in simple scenarios, yet a bit shaky with atypical query string structures.

Best practices and performance tweaks

How speed tests reveal the fastest method

Performance tests suggest split method holds the edge in speed, but readability and maintainability also matter.

Sanitizing your parameters

In all manual parsing methods, ensure correct special character handling and employ decodeURIComponent to prevent errors mustering security vulnerabilities.