How to Parse URL Query Strings (Free Tool)

What Is a Query String?

A query string is the portion of a URL that follows the question mark character. It consists of one or more key-value pairs separated by ampersands. Query strings are the primary mechanism for passing data from a client to a server through a URL, and they appear everywhere — search queries, pagination parameters, tracking codes, filter options, and API request parameters all rely on this format.

Here is a typical URL with a query string:

https://example.com/search?q=web+scraping&page=2&sort=relevance

In this example, there are three parameters: q with value "web scraping", page with value "2", and sort with value "relevance". The plus sign represents a space character, which is one form of URL encoding.

URL Encoding Explained

Not all characters are safe to include directly in a URL. Characters like spaces, ampersands, equals signs, and non-ASCII characters must be percent-encoded. URL encoding replaces unsafe characters with a percent sign followed by two hexadecimal digits representing the character's byte value.

// Common URL encodings
Space  → %20 or +
&      → %26
=      → %3D
?      → %3F
#      → %23
/      → %2F
@      → %40

When parsing query strings, you need to decode these percent-encoded characters back to their original form. Conversely, when building query strings, you must encode any values that contain reserved characters to prevent them from being interpreted as delimiters.

Building Query Strings

Constructing query strings manually by concatenating strings is error-prone. You risk forgetting to encode a value, duplicating parameters, or introducing subtle bugs. Modern JavaScript provides the URLSearchParams API, which handles encoding automatically and provides a clean interface for building and modifying query strings.

// Building a query string with URLSearchParams
const params = new URLSearchParams();
params.set("q", "web scraping tools");
params.set("page", "1");
params.set("category", "developer & tools");

console.log(params.toString());
// q=web+scraping+tools&page=1&category=developer+%26+tools

Notice how the ampersand in "developer & tools" is automatically encoded to %26, preventing it from being interpreted as a parameter separator.

Parsing Query Strings with URLSearchParams

The URLSearchParams class can also parse existing query strings. Pass the query string (with or without the leading question mark) to the constructor, then use methods like get(), getAll(), has(), and entries() to inspect the parameters.

const url = "https://example.com/search?q=web+scraping&page=2&tag=js&tag=python";
const params = new URLSearchParams(new URL(url).search);

console.log(params.get("q"));       // "web scraping"
console.log(params.get("page"));    // "2"
console.log(params.getAll("tag"));  // ["js", "python"]
console.log(params.has("sort"));    // false

// Iterate over all parameters
for (const [key, value] of params.entries()) {
  console.log(key, "=", value);
}

One important detail: a single key can appear multiple times in a query string. The get() method returns only the first value, while getAll() returns an array of all values for that key. This is commonly used for multi-select filters and checkbox groups in forms.

Common Pitfalls

Spaces: Plus vs. %20

In the application/x-www-form-urlencoded format (used by HTML forms and URLSearchParams), spaces are encoded as plus signs. In the more general percent-encoding scheme, spaces are %20. Both are valid in query strings, but mixing them or using the wrong decoder can cause issues. URLSearchParams handles this correctly by default.

Hash Fragments

The hash fragment (everything after #) is not part of the query string and is never sent to the server. If your URL contains both a query string and a hash, make sure to parse them separately. The URL constructor handles this automatically by separating search and hash properties.

Nested Objects and Arrays

Standard query strings are flat key-value pairs. Some frameworks (like PHP and Express with qs) support bracket notation for nested objects and arrays, such as filters[color]=red&filters[size]=large. This is not part of any URL standard and requires specific parsing libraries to handle correctly.

How to Use the Query String Parser

Open the Query String Parser and follow these steps:

1. Paste a full URL or query string into the input field. The tool accepts both complete URLs and standalone query strings.
2. View parsed parameters — each key-value pair is displayed in a clean table with decoded values.
3. Build new query strings by adding, editing, or removing parameters in the interactive editor.
4. Copy the result to use in your application, API requests, or browser address bar.

The tool runs entirely in your browser and handles all URL encoding and decoding automatically. It is perfect for debugging API calls, inspecting tracking URLs, and constructing complex query strings without manual encoding.

Ready to parse query strings? Open Query String Parser