webdevpuneet.com

Related Snippets

20 in 🛠 Dev category
9–14 of 20

URL Query String Parser & Builder

Number Base Converter

CSS Grid Generator

HTTP Status Code Reference

UUID / ULID Generator & Validator

Unix Timestamp Converter

URL Query String Parser & Builder — Free Snippet

URL Query String Parser & Builder · Dev · Plain HTML, CSS & JS · Live preview

Category🛠 Dev
TagsClipboard APIDeveloper Tools

Copy & paste

Source Code

<div class="wrap">
  <h2>Query String Parser & Builder</h2>

  <label class="field-label">Full URL or query string</label>
  <input type="text" id="url-input" spellcheck="false" value="https://example.com/search?q=running+shoes&category=sports&page=2&sort=price_asc" />

  <div class="params-head">
    <span>Parameters</span>
    <button id="add-param">+ Add param</button>
  </div>
  <div class="params-list" id="params-list"></div>

  <div class="output-head">Rebuilt URL</div>
  <div class="output-row">
    <pre id="rebuilt-url"></pre>
    <button id="copy-btn">Copy</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real URLSearchParams-based parsing — correctly handles repeated keys, + as space, and percent-decoding
Accepts either a full URL or a bare query string as input
Editable key/value rows backed by a plain in-memory array, re-rendered efficiently on every change
Rebuilds the query string via URLSearchParams.toString() for guaranteed correct percent-encoding
Add and remove parameter rows dynamically with automatic focus on the newest field
Single delegated input listener handles edits across any number of rows
One-click Copy of the final rebuilt URL via the Clipboard API
Invalid input is visually flagged without crashing the parser

About this UI Snippet

Query String Parser & Builder — Live URLSearchParams Editing with Correct Percent-Encoding

Screenshot of the URL Query String Parser & Builder snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste a URL or query stringPaste a full URL with a ?query or just a bare a=1&b=2 style string into the top input — it parses immediately.
  2. 2
    Edit parameters as rowsEach key and value becomes its own editable text field. Change either one and the rebuilt URL updates live below.
  3. 3
    Add a new parameterClick "+ Add param" to append a blank row, ready to type a new key and value into.
  4. 4
    Remove a parameterClick the × button on any row to delete that parameter entirely.
  5. 5
    Copy the rebuilt URLClick "Copy" to copy the correctly percent-encoded final URL to your clipboard.
  6. 6
    Export in your formatClick HTML for a standalone file, JSX for a React component, or Tailwind for a React + Tailwind version.

Real-world uses

Common Use Cases

Debugging a tracking or analytics URL
Paste a long UTM-tagged marketing URL to see every parameter broken out individually, then tweak utm_source or utm_campaign and copy the corrected link.
Building an API request URL by hand
Add query parameters one at a time while testing an API endpoint, confirming the exact encoded string that will be sent before pasting it into curl or a browser.
Teaching URL encoding rules
Show students how a space becomes + or %20, and how an ampersand inside a value gets encoded to %26, by typing tricky values directly into the value field.
Internal developer tooling
Pair with the JWT Decoder or Regex Tester in an internal dev-tools dashboard for quick request debugging.
Cleaning up a URL before sharing
Strip out unwanted tracking parameters by removing their rows, then copy a clean shareable link.
Related: JWT Decoder & Inspector
See the JWT Decoder & Inspector for a related client-side dev tool worth pairing with this one.

Got questions?

Frequently Asked Questions

Splitting the base URL from the query string uses a simple indexOf('?') split, but all actual query-string parsing and rebuilding is delegated to the browser's native URLSearchParams object, which correctly handles percent-decoding, + as a space, and repeated keys.

URLSearchParams.forEach() correctly yields both occurrences as separate entries, so they appear as two distinct editable rows rather than being merged or having one silently overwrite the other.

Instead of concatenating strings by hand, the rebuild step constructs a fresh URLSearchParams object from the current rows and calls its .toString() method, which applies standards-correct percent-encoding automatically — the same encoding fetch() or a native form submission would produce.

Yes. If there is no ? in the pasted text, it is treated entirely as the base path with no parameters; if there is a ?, everything before it becomes the base and everything after is parsed as parameters. A bare a=1&b=2 with no leading path also works since it is passed straight to URLSearchParams.

No. Edits update the specific entry in an in-memory array of key/value objects via a single delegated input listener, and only the rebuilt-URL output re-renders — the full input field is not re-parsed on every keystroke inside a parameter row.

No. All parsing, editing, and rebuilding happens client-side using URLSearchParams; nothing is transmitted anywhere, so it is safe to use with URLs containing sensitive query parameters during local debugging.