URL Parser & Analyzer

You’re debugging a redirect loop and the URL is https://auth.example.com:8443/oauth/callback?code=abc123&state=xyz&redirect_uri=https%3A%2F%2Fapp.example.com%2Fdashboard#access_token=def456. You need to see each component separately — protocol, hostname, port, path, each query parameter decoded, and the hash fragment — without mentally parsing 150 characters.

Why This Parser (Not the URL Encoder)

PureDevTools has a URL Encoder/Decoder for percent-encoding strings. This tool parses URLs into components — protocol, hostname, port, pathname, individual query parameters (decoded), hash, and origin. You can also edit individual components and reconstruct the URL. Use the encoder for encoding/decoding; use this parser for breaking down and understanding URLs.

What Is a URL Parser?

A URL parser is a tool that breaks a URL (Uniform Resource Locator) into its structural components, making it easy to inspect, understand, and modify each part independently. URLs follow a well-defined syntax described in RFC 3986 and consist of several distinct sections.

This online URL parser accepts any valid URL and immediately shows you its breakdown — protocol, hostname, port, pathname, query parameters, and hash fragment — in a readable, editable table.

URL Anatomy — All 8 Components Explained

A URL can contain up to eight distinct parts:

https://user:pass@api.example.com:8080/v2/search?q=hello+world&lang=en#results
│       │         │               │    │          │                     │
protocol credentials hostname     port  pathname   query string          fragment

Origin vs Host

Origin is the combination of protocol + hostname + port. It is the security boundary used in browser same-origin policy and CORS headers:

Origin: https://api.example.com:8080

Host is just hostname + port (without the protocol):

Host: api.example.com:8080

Query Parameters Deep Dive

Query parameters are the most commonly inspected URL component. They appear after the ? as key=value pairs separated by &:

?q=hello%20world&lang=en&page=2&sort=newest

The browser’s URLSearchParams API automatically decodes percent-encoded values when you read them, which is why the URL Parser shows you decoded values in the table while the reconstructed URL always uses properly encoded values.

How to Use This URL Parser

1. Paste a URL into the input at the top — the parser runs instantly
2. Review the component breakdown — see each part highlighted separately
3. Edit any field — change the protocol, hostname, port, path, or hash and watch the reconstructed URL update at the bottom
4. Inspect query parameters — see each key-value pair decoded in the table
5. Edit query parameters — modify, add, or remove params; the reconstructed URL updates automatically
6. Decode a parameter — if you paste a percent-encoded value directly into the value field, click the decode button to convert it
7. Copy the reconstructed URL — one-click copy of the final URL

Query Parameter Encoding and Decoding

Query parameter values can contain any Unicode character, but they must be percent-encoded in the URL itself. For example:

• Space → %20 (or + in application/x-www-form-urlencoded form data)
• & → %26 (avoids misinterpreting as parameter separator)
• = → %3D (avoids misinterpreting as key-value separator)
• 中文 → %E4%B8%AD%E6%96%87 (UTF-8 bytes, each byte encoded)
• 🚀 → %F0%9F%9A%80 (4-byte UTF-8 sequence)

The URL Parser shows decoded values in the editable fields (easier to read and edit) and the percent-encoded form as a reference. The reconstructed URL always uses correct percent-encoding.

Decoding a pasted encoded value: If you paste hello%20world directly into a value field, click the decode button to convert it to hello world. The tool then re-encodes it correctly when building the URL.

Common Use Cases

API debugging: Copy a request URL from browser DevTools, Postman, or a network log and paste it here to quickly inspect all query parameters without manually parsing the &-separated string.

Building URLs programmatically: Understand exactly how a URL should be structured before writing URL or fetch() calls in JavaScript.

Security audits: Inspect URLs for credentials embedded in the URL (username/password), unexpected query parameters, or unusual schemes.

Redirect and OAuth flows: OAuth and OIDC redirect URIs often have complex query parameters (state, code, scope). This tool makes them readable instantly.

Webhook inspection: Incoming webhook URLs frequently carry authentication tokens and event type parameters in the query string.

CDN and cache busting URLs: Verify that cache-busting parameters (?v=1234, ?_=timestamp) are correctly appended.

Internationalized URLs: URLs containing non-ASCII characters in paths or query strings must be percent-encoded. This tool correctly decodes them so you can read the original Unicode text.

How the Browser Parses URLs

Modern browsers and JavaScript use the WHATWG URL Standard (not RFC 3986 directly). This tool uses the browser’s native URL API, which means it follows the same rules as fetch(), XMLHttpRequest, window.location, and <a href> elements.

Key behaviors:

• Bare hostnames (e.g., example.com/path) are treated as HTTPS by default
• Trailing slashes in pathnames are preserved exactly
• Duplicate query parameter keys are allowed (e.g., ?tag=a&tag=b produces two tag entries)
• The URL API normalizes some characters automatically (e.g., uppercase hex %2F → %2f)

Frequently Asked Questions

Does this URL parser support non-HTTP schemes? Yes. It uses the browser’s native URL API, which supports https, http, ftp, file, blob, data, and other valid URL schemes.

What is the difference between hash and query string? The query string (?key=value) is sent to the server as part of the HTTP request. The hash fragment (#section) is never sent to the server — it is processed entirely in the browser and used for in-page navigation.

Can I edit the URL components and reconstruct the URL? Yes. Every component field (protocol, hostname, port, pathname, hash) is editable. Query parameters can be added, removed, and edited inline. The reconstructed URL at the bottom updates in real time.

Does the tool handle percent-encoded characters correctly? Yes. The tool uses the WHATWG URL and URLSearchParams APIs, which correctly encode and decode percent-encoded characters including multibyte UTF-8 sequences for Unicode text, emoji, and non-Latin scripts.

What happens if my URL is invalid? If the URL cannot be parsed (for example, it contains spaces or is missing a hostname), the tool displays an error message. Adding https:// as a prefix is often enough to fix a bare hostname.

Is my URL data sent anywhere? No. All parsing, editing, and reconstruction happens entirely in your browser using the native URL JavaScript API. No data is transmitted to any server.

Can I use this for data URIs? Data URIs (data:image/png;base64,...) use a non-hierarchical scheme and cannot be meaningfully decomposed into hostname/path/query components. The tool will show the scheme but the other fields will not apply.