URL Query String Parser & Builder — Free Snippet

A URL's query string looks simple until you have to hand-edit one with an ampersand inside a value, a plus sign that means a literal space, or a parameter repeated twice with different values. This snippet parses any full URL or bare query string into an editable table of key/value rows using the browser's own URLSearchParams API, then rebuilds a correctly percent-encoded URL from those rows on every edit — so you never have to remember encoding rules by hand.

Splitting the URL from its query string

splitUrl() finds the first ? character and splits the input into a prefix (everything before it — scheme, host, and path) and a query (everything after). This is a deliberately simple split rather than a full URL-parsing implementation, because it needs to accept both a complete URL and a bare query string like a=1&b=2 typed on its own, which the stricter built-in URL constructor would reject for lacking a scheme and host.

URLSearchParams does the real parsing

new URLSearchParams(query) is the browser's native query-string parser: it understands &-separated pairs, =-separated key/value pairs, + as an encoded space (per the application/x-www-form-urlencoded convention used in query strings), and full percent-decoding of any %XX sequence. Iterating it with .forEach((value, key) => ...) correctly yields every occurrence of a repeated key as a separate pair, so ?tag=a&tag=b becomes two distinct rows in the editable list rather than being collapsed or overwritten — a detail a hand-rolled split('&').map(...) parser very commonly gets wrong.

Editable rows kept as an in-memory array of objects

Parsed parameters are stored as a plain array of { key, value } objects, re-rendered into a row of two text inputs and a remove button per parameter. Editing a key or value field updates that array entry directly via a single delegated input listener on the container (reading data-idx and data-field attributes from the event target), rather than attaching a listener to every individual input — a pattern that scales cleanly regardless of how many parameters are added or removed.

Rebuilding with correct encoding, not string concatenation

renderOutput() builds a fresh URLSearchParams from the current row data and calls .append(key, value) for each one, then .toString() to produce the encoded query string. This is the critical correctness detail: manually concatenating key + '=' + value + '&' would produce a broken URL the moment any value contains an &, a space, or a non-ASCII character, since none of those get escaped. Delegating to URLSearchParams.toString() guarantees standards-correct percent-encoding every time, matching exactly what fetch() or XMLHttpRequest would produce for the same parameters.

Adding, removing, and copying

The "+ Add param" button pushes an empty row and focuses its key input immediately, keeping the editing flow fast for building a query string from scratch rather than only editing an existing one. Each row's remove button splices that entry out of the array by index. The final rebuilt URL is shown in a read-only panel with a one-click Copy button using navigator.clipboard.writeText(), with a safe fallback confirmation if the Clipboard API is unavailable.