URL Parser & Builder
Understand URL Parser & Builder
Splits a URL into protocol, host, port, path, query parameters, and fragment, and rebuilds a valid URL from those parts.
How it works
Parsing uses the browser's built-in WHATWG URL API rather than a regular expression, so it applies the same normalization the address bar does: it lowercases the scheme and host, resolves default ports away (https://example.com:443 becomes https://example.com), punycodes internationalized domains, and percent-encodes what must be encoded. Query parameters are read through URLSearchParams, which decodes each key and value and treats "+" in a query string as a space. Building a URL back from parts re-encodes automatically, which is the reason to use this rather than string concatenation.
When to use it
- Pulling apart a long OAuth callback or tracking URL to see exactly which parameters are present and what they decode to
- Checking whether a redirect target you are about to trust points at the host you think it does — the parsed hostname is the field to compare, not a substring of the whole URL
- Assembling a URL with user-supplied query values without hand-encoding ampersands, spaces, and slashes
- Confirming that a percent-encoded path segment (%2F versus /) survives the way your router expects
Watch out for
- Repeated query keys collapse. `?tag=a&tag=b` is legal and common, but a plain key/value view keeps only the last value — use `searchParams.getAll("tag")` in code when duplicates matter.
- The fragment after `#` is never sent to the server. It exists only in the browser, which is why putting a token there hides it from server logs but not from any script on the page.
- Only absolute URLs parse. A relative path such as `/v2/users` has no scheme or host and needs a base URL before it can be parsed at all.
- Credentials embedded as `https://user:pass@host/` still parse, and they will also appear in Referer headers, browser history, and proxy logs. Seeing them here is a reason to remove them, not to keep them.
Frequently Asked Questions
How do I extract query parameters from a URL?
Paste the URL. The tool splits the query string (everything after ?) into individual key=value pairs. For example, ?page=2&sort=date&order=asc becomes three parameters: page=2, sort=date, order=asc, each URL-decoded automatically.
What is the URL fragment (#hash) used for?
The fragment (everything after #) is NOT sent to the server — it's browser-only. It scrolls to an element with that ID (id="section-2"), triggers client-side routing in SPAs (React Router, Vue Router), or carries state for OAuth flows (access_token in implicit grants).
How do I build a URL with query parameters programmatically?
Use the URLSearchParams API in JavaScript: const params = new URLSearchParams({page: 2, sort: 'date'}); url.search = params.toString(). This automatically encodes special characters correctly — avoid manual string concatenation.
How to Use URL Parser & Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.