Examples
URL Builder
Protocol
Host
Port
Path
Query
Hash
https://example.com
What is URL Parser?
URL Parser breaks any URL into its component parts: protocol/scheme, username, password, hostname, port, path, query string parameters (parsed into key-value pairs), and fragment (hash). Enter any URL to see each component labeled and explained — useful for debugging API URLs, understanding redirect chains, and dissecting OAuth callback URLs with complex query strings.
A URL (Uniform Resource Locator) has a defined structure: scheme://username:password@hostname:port/path?query#fragment. Scheme: https, http, ftp, ws, wss, mailto, data. Hostname: the domain or IP address. Port: defaults to 80 for http, 443 for https (shown only when non-default). Path: the resource location on the server. Query string: key=value pairs starting with ?, separated by &. Fragment: the in-page anchor (#section), processed by the browser, not the server.
URL encoding: special characters in URLs must be percent-encoded — space becomes %20 (or +), @ becomes %40, = becomes %3D. Query values that contain & or = must be encoded. URL parsers handle this transparently. The browser's URL API (URL constructor in JavaScript) automatically parses and decodes components: new URL('https://example.com/path?q=hello+world').searchParams.get('q') returns 'hello world'.
How to Use
- Paste any URL into the input field — it's automatically parsed into components.
- View each component: scheme, host, port, pathname, search params, and hash.
- Expand the 'Query parameters' section to see each key-value pair decoded.
- Click any component to copy its value.
- Use 'Build URL' mode to construct a URL from individual components.
Examples
Parse OAuth callback
Result: https://app.com/callback?code=abc123&state=xyz&scope=read+write → code, state, scope extracted
Parse API endpoint
Result: https://api.example.com:8080/v2/users?page=1&limit=20 → host:port, version, pagination params
Decode complex query string
Result: ?filter=name%3DAlice%26age%3D30 → filter: 'name=Alice&age=30' (URL-decoded)
Frequently Asked Questions
What is the difference between URI and URL?
A URI (Uniform Resource Identifier) is a string that identifies a resource. A URL (Uniform Resource Locator) is a URI that also provides the means to locate the resource — it includes the scheme (how to access it). A URN (Uniform Resource Name) identifies a resource by name without specifying location: urn:isbn:0451450523. All URLs are URIs, but not all URIs are URLs. In practice, 'URL' is used for web addresses and 'URI' is used in more technical contexts (XML, Java APIs).
What is the fragment (#) part of a URL and why doesn't the server see it?
The fragment (hash) portion of a URL (https://example.com/page#section2) is processed entirely by the browser — it's not sent to the server in HTTP requests. The server receives: GET /page HTTP/1.1. The browser uses the fragment to scroll to the matching id on the page. This is why SPA routing often uses hash routing (#/about, #/dashboard) — the server always serves the same index.html, and JavaScript reads the hash. History API pushState enables URL routing without hashes.
How do I parse URL query parameters in JavaScript?
Modern approach using URLSearchParams: const url = new URL(window.location.href); const page = url.searchParams.get('page'); const tags = url.searchParams.getAll('tag'); (for repeated ?tag=a&tag=b). Or: Object.fromEntries(url.searchParams) for all params as an object. Node.js: import { URL } from 'url'; const { searchParams } = new URL(urlString). Old approach (avoid): manual splitting on & and = — fails for edge cases like encoded characters.
What are data: URLs and when are they used?
Data URLs (data:mediatype;base64,data) embed file content directly in the URL. Example: 
embeds a PNG image directly in HTML without an HTTP request. Use cases: small icons, placeholders in CSS (background-image: url('data:...')), email HTML (many email clients block external images), and generated SVGs or PDFs. Limitations: no caching (re-embedded every request), increases HTML/CSS size, some CSP policies block them.
What is URL normalization and why does it matter for caching?
URL normalization ensures semantically equivalent URLs have a canonical form. Examples: https://Example.COM/ and https://example.com/ are the same (domain is case-insensitive). /path/ and /path have different cache keys by default (some servers treat them identically). Trailing slashes and default ports (https://example.com:443/) can cause duplicate cache entries. CDNs and reverse proxies normalize URLs to improve cache hit rates. Search engines use canonical URLs (rel=canonical) to avoid indexing duplicate content.