How do you read query string parameters?

Use URLSearchParams. It parses the string and handles decoding for you, so you never need a regular expression for this.

// ?q=hello+world&page=2&tag=a&tag=b
const params = new URLSearchParams(window.location.search);

params.get("q");        // "hello world" — decoded, + becomes a space
params.get("page");     // "2"  — always a string
params.get("missing");  // null
params.has("tag");      // true
params.getAll("tag");   // ["a", "b"] — repeated keys

Two things to note: values always come back as strings, so convert numbers yourself; and a missing key gives null, not undefined.

Reading everything

Object.fromEntries(params);            // { q: "hello world", page: "2", tag: "b" }
for (const [key, value] of params) { /* ... */ }

Object.fromEntries keeps only the last value of a repeated key, so use getAll when duplicates matter.

Building and updating

params.set("page", "3");
params.delete("tag");
params.toString();                     // "q=hello+world&page=3"

const url = new URL(window.location.href);
url.searchParams.set("page", "3");
history.replaceState(null, "", url);   // update the address bar, no reload

Encoding is automatic, which is the main reason to use it — manual string concatenation breaks on spaces, &, and non-Latin characters.

In a framework

Next.js gives you useSearchParams() on the client and a searchParams prop on server components; React Router has useSearchParams. Prefer these over reading window.location directly, since they re-render on change and work during server rendering, where window does not exist.

Treat the values as untrusted

Query strings come from the URL, so anyone can put anything there. Validate before use, and never write one into the page with innerHTML — reflected XSS starts exactly here.