Paste any URL — get protocol, host, port, path, hash, and decoded query params
Quick answer: a URL breaks into scheme://user:info@host:port/path?query#fragment. Example: https://www.example.com:8443/products/search?sort=price&tag=summer%20sale&q=10%25%20off#results parses to protocol https:, host www.example.com:8443, path /products/search, fragment #results, and decoded params sort=price, tag=summer sale, q=10% off (percent-encoding: %20 = space, %25 = %). This tool uses your browser's native WHATWG URL parser — zero libraries — and lets you edit values and rebuild the URL.
| Key | Raw value (as sent) | Decoded / edit & rebuild |
|---|
Edit any decoded value and the rebuilt URL above updates instantly, re-encoding with encodeURIComponent. Duplicate keys are preserved in the rebuild, since real servers (and arrays like tag=a&tag=b) depend on them.
| Component | In the worked example | What it does |
|---|---|---|
| Scheme | https: | Which protocol (and default port) to use |
| User info | (none here) | user:password@ — legacy basic auth in the URL, e.g. https://user:[email protected]/ |
| Host | www.example.com | DNS name (or IP) to connect to |
| Port | :8443 | Override the scheme's default (443 https, 80 http); empty means default |
| Path | /products/search | Resource location on the server |
| Query string | ?sort=price&min_rating=4.5&tag=summer%20sale&q=10%25%20off%20%C3%A9clair | &-separated key=value pairs; values percent-encoded |
| Fragment | #results | Client-side only: never sent to the server |
| Encoded | Character | Why it's encoded |
|---|---|---|
| %20 | space | Spaces are illegal in URLs; form data often uses + instead |
| %25 | % | The escape character itself |
| %26 | & | Separates parameters, so a literal & in a value must be escaped |
| %3D | = | Separates key from value |
| %2B | + | Means space in form encoding; escaped to stay a real plus |
| %2F | / | Path separator inside a query or path segment |
| %3F | ? | Starts the query string |
| %23 | # | Starts the fragment |
| %C3%A9 | é | Two-byte UTF-8, one %XX per byte |
That last row is the pattern for all non-ASCII text: UTF-8 bytes, each byte escaped. Tokyo's 渋 is three bytes (%E6%B8%8B), and an emoji is four.
Every browser since 2016 ships a URL parser that follows the WHATWG URL standard — the same algorithm Node.js uses — and this page calls it directly: new URL(string). No regular expressions, no library, no server round-trip. That matters because URL syntax has edges a regex chokes on: default ports, IPv6 hosts in square brackets, IDN domains that resolve to punycode (xn--), empty query strings, and the difference between ? alone and no ? at all.
The protocol includes the colon (https:). The hostname is the domain; host is hostname plus port when present. The pathname always starts with / for special schemes like http and https. search is the whole query string including the ?, while searchParams is the parsed, decoded map — the tool shows both: raw value as sent, decoded value as a human reads it.
Feed it the default URL: https://www.example.com:8443/products/search?sort=price&min_rating=4.5&tag=summer%20sale&q=10%25%20off%20%C3%A9clair#results.
The parse: protocol https: on host www.example.com, non-default port 8443 (the parser knows 443 is the default and would leave the field empty for it). Path is /products/search. Fragment #results never reaches the server. Four parameters: sort=price needs no decoding, min_rating=4.5 neither, but tag=summer%20sale decodes to summer sale and q=10%25%20off%20%C3%A9clair decodes to 10% off éclair — the %25 collapses back to a real percent sign and the two bytes of é reassemble. Want to test a change? Edit the decoded cell and the rebuilt URL re-encodes it correctly, so you never hand-escape a value again.
One habit worth stealing from this tool for your own code: read parameters through URLSearchParams rather than splitting on & yourself. It handles plus-as-space, repeated keys, and encoding edge cases exactly the way servers expect.
Use the built-in URL class: const u = new URL('https://example.com:8443/p?q=hi') gives u.protocol ('https:'), u.hostname, u.port, u.pathname, and u.hash, while u.searchParams.get('q') returns the decoded value 'hi'. No library needed — every modern browser and Node.js ship the same WHATWG implementation, which is exactly what this tool runs.
Everything after the ? and before the #: a list of key=value pairs separated by &. In https://example.com/search?q=laptops&sort=price, the query string is q=laptops&sort=price. Values are usually percent-encoded (spaces become %20), and a parser decodes them automatically — sort=price stays put, but q=10%25%20off%20sale decodes to 10% off sale.
%20 is the percent-encoded form of a space. Percent encoding replaces unsafe characters with a % followed by two hex digits: %20 space, %3F ?, %3D =, %26 &, %2F /, %23 #, and %C3%A9 is é (two bytes of UTF-8). The % character itself becomes %25, which is why 10% off encodes as 10%25%20off.
No. The fragment (everything after #) is client-side only — the browser keeps it, scrolls to the matching anchor, and strips it before sending the HTTP request. That's why analytics tools append campaign IDs after a # (they don't cause a reload) and why server logs never contain fragments. SPAs use the fragment as routing state for the same reason.
A port appears after the host as :8443 in example.com:8443. If it's omitted, the scheme implies the default: 443 for https, 80 for http, 21 for ftp. Browsers' URL parser leaves u.port empty when the URL uses the default port, so https://example.com and https://example.com:443 parse identically — one just states the implied number.
URL is the subset of URI that includes a location — how to fetch the thing. https://example.com/x is both a URI and a URL; urn:isbn:0451450523 is a URI that names a book but isn't a URL because there's no way to fetch it. In everyday web work the terms are used interchangeably, and the WHATWG URL standard effectively retired the distinction for browsers.