What this tool does
Free URL parser: break down any URL into protocol, hostname, path, query parameters, and fragment
How URL parsing works and what each component means
This URL parser uses the browser's native URL API to decompose any URL into its constituent parts. It extracts the protocol, origin, hostname, port, pathname, search string, and fragment, and also parses all query string parameters into individual key-value pairs with URL-encoded characters automatically decoded.
Every component is displayed in its own field with a copy button, making it easy to extract just the hostname from a long URL, or to see all query parameters in a readable format. This is especially useful when debugging API requests, inspecting OAuth callback URLs, or analysing tracking parameters in marketing links.
Features and capabilities
Component Extraction
Extracts protocol, origin, hostname, port, pathname, query string, and fragment separately.
Query Param Parsing
All query string parameters extracted as individual key-value pairs, decoded automatically.
URL Decoding
Percent-encoded characters (%20, %26 etc.) decoded to readable text automatically.
Credentials
Extracts username and password from URLs that include them (http://user:pass@host).
Copy Any Part
Copy button on every field, extract just the hostname, path, or any single parameter.
Live Parsing
Updates instantly as you type or edit the URL.
100% Client-Side
Uses the browser's native URL API, nothing sent to a server.
No Signup
Paste any URL and see results instantly.
FAQ
Frequently asked questions about URLs, URL components, and URL encoding
What are the components of a URL?
A URL (Uniform Resource Locator) has up to 8 components: protocol (the scheme, e.g. https://), credentials (optional username:password before the host), hostname (the domain or IP address), port (optional. Defaults to 80 for HTTP and 443 for HTTPS), pathname (the path to the resource, starting with /), query string (key=value pairs after ?, separated by &), fragment (the anchor after #, used for in-page navigation), and origin (protocol + hostname + port combined). Most everyday URLs only use protocol, hostname, pathname, and query string.
What is URL encoding and why is it needed?
URL encoding (percent-encoding) replaces characters that are not safe in a URL with a % followed by the ASCII hex code. For example, a space becomes %20, & becomes %26, and = becomes %3D. This is necessary because URLs can only contain a limited set of safe ASCII characters. Special characters, international characters, and spaces would otherwise be ambiguous or break the URL structure. Query parameter values in particular often need encoding. This tool automatically decodes encoded values for display.
What is the difference between hostname and origin?
The hostname is just the domain name or IP address. E.g. api.example.com. The origin is the combination of protocol + hostname + port. E.g. https://api.example.com:8080. The origin is the security boundary used by browsers for the Same-Origin Policy: two pages have the same origin only if all three (protocol, hostname, and port) match exactly. A mismatch in any one means they're different origins, which triggers CORS restrictions for cross-origin requests.
What is the fragment (#) part of a URL?
The fragment identifier (the part after #) is not sent to the server. It's processed entirely by the browser. It traditionally points to an element with a matching id attribute on the page, scrolling the viewport to that position. In single-page applications (React, Vue, Angular), the hash is also used for client-side routing, where the server always returns the same HTML and the JavaScript reads the hash to determine which view to render. Fragments are also used in OAuth flows to return tokens to the client without the server seeing them.
Why does my URL show a port number?
A port number appears in the URL when the server is running on a non-default port. Default ports are 80 for HTTP and 443 for HTTPS. Browsers omit these. If a server runs on port 8080, 3000, 8443, or any other non-standard port, the port must be explicitly included in the URL. In development environments, you'll typically see ports like :3000 (React dev server), :8080 (various backends), or :5000 (Flask). In production, the web server (Nginx, Apache) or a load balancer usually handles port 80/443 and proxies to the app.
Related Developer Tools
Need a disposable email address?Get a free instant throwaway email. No signup, no trace.
Get Free Temp Mail →