Query String Parser & Builder: URL Parameters Made Readable
A long URL like ?utm_source=newsletter&utm_medium=email&page=2&tags=a&tags=b is hard to scan by eye. This tool parses any URL's query string into a clean key-value table and JSON object, and works the other way too — build a query string from individual key-value pairs with correct encoding handled automatically.
Repeated keys are automatically grouped into an array in the JSON output.
Why Query Strings Need a Real Parser
Query strings look simple but have real edge cases: percent-encoded characters (%20 for space), '+' also meaning space in some contexts, repeated keys that should become arrays, and empty values. Using the browser's native URLSearchParams instead of a naive split('&') avoids all of these pitfalls.
Debugging Real-World URLs
When an API call isn't behaving as expected, the fastest way to spot the problem is often to see every query parameter laid out individually rather than as one long string. A parameter that's misspelled, duplicated, or missing becomes obvious in a table in a way it isn't in a 200-character URL.
Building Query Strings Correctly
Manually concatenating '&key=value' strings is a common source of encoding bugs — an unescaped '&' or '=' inside a value breaks the whole URL. The builder here uses URLSearchParams to serialize pairs, so special characters are percent-encoded automatically and safely.
Practical Examples
Parsing a Tracking URL
Breaking down UTM parameters.
- 1.Input: ?utm_source=newsletter&utm_medium=email&utm_campaign=launch
- 2.utm_source: newsletter
- 3.utm_medium: email
- 4.utm_campaign: launch
Building a Search API Request
Constructing a query string from scratch.
- 1.Pairs: q=running shoes, page=1, sort=price
- 2.Output: q=running+shoes&page=1&sort=price
What Gets Handled Automatically
- Percent-decoding: %20, %26, etc.
- Plus-as-space: q=hello+world -> "hello world"
- Repeated keys: grouped into arrays in JSON
- Safe encoding: when building a query string from pairs
Good Use Cases
- Debugging broken or unexpected API request parameters
- Understanding a long marketing/tracking URL at a glance
- Building a query string for an API call without manual encoding mistakes
- Converting between query-string and JSON representations
Frequently Asked Questions
Does this work with a full URL or just the query string?
Both. Paste a full URL like https://example.com/search?q=hello and it extracts everything after the '?', or paste just the query string portion directly.
How are repeated keys like tags=a&tags=b handled?
In the parsed table, each occurrence shows as its own row. In the JSON output, repeated keys are automatically collected into an array — {"tags": ["a", "b"]} — instead of the second value overwriting the first.
Does the parser handle URL-encoded characters?
Yes. It uses the browser's native URLSearchParams, which automatically decodes percent-encoding and '+' as space, so q=hello%20world or q=hello+world both show as 'hello world'.
How does the query string builder encode special characters?
It also uses URLSearchParams to serialize your key-value pairs, so spaces, ampersands, and other reserved characters are automatically percent-encoded in the output.
Can I use this to debug a broken API request?
Yes — paste the full request URL to see every parameter broken out individually, which makes it much easier to spot a missing, duplicated, or misspelled parameter than scanning a long query string by eye.
Is my URL sent anywhere?
No, parsing and building both happen entirely in your browser using the native URLSearchParams API.