Parse a URL _

How URL parsing works

The parser runs on the WHATWG URL standard, the same algorithm the browser uses for any href. We hand the string to the native URL constructor and read back every component as a property.

1. Validate the input. An empty string surfaces an empty-input notice. Otherwise we pass the text to new URL(text); a TypeError means the string isn't a valid absolute URL.
2. Read the structural components. We read protocol, username, password, host, hostname, port, pathname, search, hash, and origin off the URL object. Each one lands in its own row so you can copy it in isolation.
3. Walk the query string. We iterate url.searchParams.entries() and render one table row per key. The raw value sits beside decodeURIComponent(value) so percent-encoded payloads (spaces, plus signs, Unicode) read in plain English.
4. Rebuild on demand. Edit any cell, delete a row, or add a new parameter, then click Build URL. The tool reconstructs a fresh URL object from your edits and writes the result back to the input box.
5. Live mode. Toggle live mode and every keystroke re-parses the URL with a 150 ms debounce. Useful when you're pasting fragments from a log and want immediate feedback.

Why parse a URL in your browser

• Nothing leaves the tab. URLs carry tokens, session IDs, OAuth state, and signed query parameters you don't want a third-party service holding onto. This parser uses the same URL algorithm your browser already runs locally — no upload, no network call.
• Matches what your code sees. Node.js, Deno, modern browsers, and Cloudflare Workers all ship the WHATWG URL implementation. Inspecting a URL here gives you the same component split a new URL(input) call gives you in production.
• Reads query strings the way humans do. Raw and decoded values sit side by side, so a q=hello%20world pair displays both the wire bytes and the readable hello world in one glance. No mental URL-decoding required.
• Round-trip editing. Drop a tracking parameter, fix a typo in the path, change a port — and rebuild the URL. The output goes back through the URL constructor so anything invalid surfaces before you copy it.

Common applications

URL parsing shows up in day-to-day developer, security, and analytics work whenever a URL is more than just a link.

• Debugging API endpoints: confirm a base URL, path, and query parameters before sending a curl or Postman request.
• Tracking-parameter audits: list every UTM, gclid, fbclid, or campaign key on a landing-page URL and decide which to keep.
• Validating affiliate and partner links: paste a deeplink, confirm the destination host and the embedded redirect target before publishing.

A worked example

Paste https://example.com/search?q=hello%20world&lang=en into the input. Protocol reads https:, hostname reads example.com, pathname reads /search, and search reads ?q=hello%20world&lang=en. The query table shows two rows: q with raw value hello%20world and decoded value hello world, then lang with both raw and decoded values en. Click Remove on the lang row, then Build URL — the input updates to https://example.com/search?q=hello%20world.

FAQ

What is a URL parser?

A URL parser takes a URL string and decomposes it into named components: protocol (https), userinfo (username, password), host (hostname plus optional port), path, query string, and fragment. It also decodes each query parameter so percent-encoded values (like %20 for a space) are readable. The parser here uses the WHATWG URL standard, the same one your browser uses to load a page.

What's the difference between host and hostname?

Hostname is just the domain (or IP address) — for example.com:8080 the hostname is example.com. Host is hostname plus the port when a non-default port is present, so the same URL has a host of example.com:8080. For URLs on default ports (443 for https, 80 for http) the host and hostname are identical.

Does decoding happen automatically?

Structural components (protocol, hostname, port, pathname) read directly from the URL object without extra decoding — the URL constructor already normalises them. Query values are shown twice: the raw percent-encoded string as it appears in search, and the decoded value produced by decodeURIComponent. That way you can copy whichever form your downstream tool expects.

Can I edit and rebuild the URL?

Yes. Every parts cell and every query-parameter cell is editable. Add or remove query rows with the Add and Remove buttons, then click Build URL from parts. The tool runs your edits back through the URL constructor and writes the result to the input — if the edits produce an invalid URL you get the same error message you'd get from new URL() in your own code.

URL parsing is one of those small jobs every web developer does every week. Doing it in the browser, with the same algorithm production code uses, keeps the work fast and the data on your machine.