Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For the current page, pass window.location.search to URLSearchParams, then call get() with the parameter name. For a complete URL string, create a URL object first and read its searchParams.

Read a parameter from the current page

window.location.search contains the current page’s query string, including its leading question mark. Use it to construct URLSearchParams and read a named value:

const params = new URLSearchParams(window.location.search);
const productId = params.get('productId');

if (productId === null) {
  // The parameter was not supplied.
}

get() returns the first value associated with the name, or null if the parameter is absent. Check specifically for null when absence matters; a present parameter may have an empty string as its value. See MDN’s get() reference.

Read parameters from a complete URL

If you have a full URL rather than just a query string, parse it with URL and then use its searchParams property:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const url = new URL('https://example.com/products?productId=42&ref=email');
const productId = url.searchParams.get('productId'); // '42'
const ref = url.searchParams.get('ref');             // 'email'

URL.searchParams provides access to the URL’s query parameters as a URLSearchParams object. This is the appropriate approach for a complete URL string; see MDN’s URL.searchParams reference.

Handle repeated parameter names

Query strings can include the same name more than once. get() returns only the first matching value; use getAll() to retrieve every value. Use has() if you only need to test whether the name occurs:

const params = new URLSearchParams('tag=javascript&tag=web');

params.get('tag');    // 'javascript'
params.getAll('tag'); // ['javascript', 'web']
params.has('tag');    // true

For more details on reading and iterating query parameters, see MDN’s URLSearchParams guide.

Loop through every name and value

A URLSearchParams object is iterable. A for...of loop visits each name-value pair in query-string order, including repeated names:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const params = new URLSearchParams(window.location.search);

for (const [name, value] of params) {
  console.log(name, value);
}

Understand decoding and value types

Values returned from query parameters are strings. When the constructor parses a query string, it decodes percent escapes, and a plus sign (+) represents a space. Convert values explicitly when your code needs another type:

const params = new URLSearchParams('?page=3&enabled=true');
const page = Number(params.get('page')); // 3
const enabled = params.get('enabled') === 'true';

Conversion does not validate the input: for example, Number() can produce NaN if the value is not a valid number. Check the result if invalid input needs to be handled. The constructor’s accepted inputs and decoding behavior are described in MDN’s constructor reference.

Do not pass a full URL to URLSearchParams

URLSearchParams accepts a query string, not a complete URL. Passing the full URL directly does not extract its query correctly:

// Incorrect: this is a full URL, not a query string
new URLSearchParams('https://example.com/?q=js');

// Correct: parse the URL, then read its search parameters
new URL('https://example.com/?q=js').searchParams.get('q');

For a query-string-only input, an initial ? is stripped by the constructor. For a full URL, use new URL(value).searchParams, as documented in the URLSearchParams guide and constructor reference.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Choose the right method for the job

  • Current page: use new URLSearchParams(window.location.search).
  • Complete URL string: use new URL(value).searchParams.
  • One value: use get(name), and account for its null result when the name is absent.
  • Repeated values: use getAll(name); get(name) returns only the first.
  • Presence check: use has(name).

For building or changing query strings, methods such as set(), append(), delete(), and sort() modify the parameters. Call toString() to serialize them as a query string suitable for a URL. These methods are documented in the MDN guide.

Browser support

MDN marks URL and URLSearchParams as widely available across browsers since April 2018. Projects that must support older browsers outside that range may need a fallback parser; the APIs’ current compatibility information is available on MDN’s URLSearchParams and URL.searchParams pages.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.