URL & Query String Parser
Deconstruct any URL into protocol, authentication, host, port, path, query parameters, and fragment. Edit query parameters visually in an interactive table and convert query strings to structured JSON objects with two-way synchronization. 100% client-side.
Protocol / Scheme
https:
Host / Domain
api.example.com:8443
Port
8443
Pathname
/v1/search
Origin
https://api.example.com:8443
Hash / Anchor
#results
Query Parameters (0)
| Key | Value (Decoded) |
|---|
Structured JSON Object
Supports arrays (repeated keys) and bracket notation (
filter[key]=val).
The Anatomy of Modern URLs & Query String Serialization
A Uniform Resource Locator (URL) is a standardized string of characters conforming to RFC 3986 and the living WHATWG URL Specification. URLs uniquely identify web resources and communicate transmission parameters to web servers, microservices, and client-side single page applications (SPAs).
1. Standard URL Syntax Decomposition
According to RFC 3986 §3, any absolute URI complies with the formal grammar:
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
- Scheme / Protocol: Defines the communication protocol (e.g.,
https,http,wss,ftp). Followed by:. - Authority (
user:pass@host:port):- Userinfo (optional): Deprecated in modern web standards for plain HTTP credentials, but still utilized in database connection URIs (e.g.
postgres://user:pass@localhost:5432/db). - Host: Domain name (
api.example.com) or IP literal ([::1]or192.168.1.1). Always canonicalized to lowercase. - Port: Numerical port address. Omitted if matching default protocol ports (80 for HTTP, 443 for HTTPS).
- Userinfo (optional): Deprecated in modern web standards for plain HTTP credentials, but still utilized in database connection URIs (e.g.
- Pathname: Hierarchical slash-delimited path referencing a resource (
/v1/search/products). - Query String (
?key=value&...): Non-hierarchical data payload serialized as ampersand-separated key-value pairs. - Fragment Identifier (
#anchor): Client-side locator that is never transmitted to the web server in HTTP request headers. Utilized exclusively by the web browser for scrolling or frontend routing.
2. Handling Arrays and Nested Objects in Query Strings
Unlike JSON, which has strict syntax specifications for lists ([]) and maps ({}), the HTTP standard has no native concept of arrays or complex objects in query strings. Over time, three major conventions emerged:
| Pattern Convention | Query String Example | Server Framework Parser Behavior |
|---|---|---|
| Repeated Keys (Standard) | ?tags=api&tags=fast |
Node.js / Express parses as ["api", "fast"]. Python Django uses request.GET.getlist('tags'). |
| Bracket Array Notation | ?tags[]=api&tags[]=fast |
PHP ($_GET['tags']) and Ruby on Rails automatically cast into an array. |
| Bracket Object Notation | ?filter[active]=true&filter[role]=admin |
Parsed by Express qs into nested object { filter: { active: 'true', role: 'admin' } }. |
3. Critical Pitfalls in URL Parsing
- Premature Percent-Decoding: If an entire URL is decoded using
decodeURIComponent()before splitting by?or&, any literal%26(encoded&) or%3F(encoded?) inside a query parameter value will be prematurely converted to actual delimiters, corrupting the parameter structure. - Space Encoding: Query string specifications in
application/x-www-form-urlencodedtraditionally convert spaces to plus signs (+), whereas standard RFC 3986 URI paths use%20. Modern parsers treat+as a space in query strings.
Frequently Asked Questions
- Why does the server never receive the #hash part of a URL?
- According to RFC 3986, the fragment identifier (prefixed by
#) is strictly a client-side instruction for the browser's user agent. The browser strips the fragment before sending the HTTP request over the network. - How does this tool convert query strings into JSON?
- It utilizes the browser's native
URLSearchParamsparser. If a key appears multiple times, it aggregates the values into an array. If keys contain brackets (e.g.user[name]), it reconstructs nested JSON objects. - Is my URL data logged or stored anywhere?
- Never. All URL decomposition and JSON serialization execute in memory directly within your browser session.