URL Parser & Builder

Break any URL into its components, build URLs from parts, encode/decode, or batch-parse multiple URLs.

URL
Paste a URL above to parse it.

How to Use the URL Parser

  1. Parse — paste any URL to instantly see each component broken out: scheme, host, port, path segments, query parameters as a table, and hash. Each value has a copy button.
  2. Build — fill in individual fields and query parameter rows. The assembled URL updates in real time.
  3. Encode — choose Full URL (encodeURI), Component (encodeURIComponent), or Decode. Useful for handling special characters in query strings.
  4. Batch — paste multiple URLs, one per line. The tool extracts the host, path, and parameter count from each in a compact table.

Anatomy of a URL

A URL (Uniform Resource Locator) is defined in RFC 3986 and has the following structure:

scheme://userinfo@host:port/path?query#fragment
  • Scheme — the protocol: https, http, ftp, mailto, file
  • Authority — optional userinfo (user:pass@), host, and port
  • Host — domain name or IP address
  • Port — optional; defaults are 80 for HTTP, 443 for HTTPS
  • Path — hierarchical path to the resource, separated by /
  • Query — key-value pairs after ?, separated by &
  • Fragment — in-page anchor after #, processed client-side only (never sent to server)

URL Encoding

URLs may only contain a limited set of characters. Special characters must be percent-encoded: each byte is represented as %HH where HH is the hexadecimal value. JavaScript provides two encoding functions: encodeURI() encodes a complete URL, leaving structural characters like /, ?, &, and # intact. encodeURIComponent() encodes an individual value, encoding those structural characters too — use it for query parameter keys and values.

Query Strings

The query string carries data from the browser to the server. Keys and values are joined by = and pairs are separated by &. The browser API URLSearchParams parses query strings automatically and handles duplicates, empty values, and encoded characters. UTM parameters (utm_source, utm_medium, utm_campaign) are query string parameters used for marketing analytics — see our UTM Builder to create them.

Fragment Identifiers

The fragment (hash) part of a URL is never sent to the server — it is purely a client-side instruction. In traditional HTML it scrolls to an element with a matching id. In single-page applications (SPAs), the hash is used for client-side routing — changing the hash updates the URL without triggering a page reload. In contrast, the HTML5 History API (pushState) allows SPAs to use full path-based URLs while still handling navigation client-side.

Relative vs Absolute URLs

An absolute URL contains the full scheme and authority (e.g., https://example.com/page). A relative URL is resolved against a base URL: /page is relative to the origin, page is relative to the current path, and ../page navigates one level up. The browser's URL constructor resolves relative URLs: new URL('/page', 'https://example.com') returns the absolute form. This matters for canonical URLs, Open Graph tags, and sitemap entries which should always use absolute URLs.

Frequently Asked Questions

A URL has up to seven components: scheme (protocol), authority (username:password@host:port), path, query string (?key=value&key2=value2), and fragment (#section). Not all components are required — a minimal URL like https://example.com has only scheme and host.
URL encoding converts characters not allowed in URLs into a percent sign followed by two hexadecimal digits. For example, a space becomes %20 and a hash becomes %23. Query string values are encoded with encodeURIComponent() which encodes all special characters except letters, digits, -, _, ., and ~.
encodeURI() encodes a complete URL, leaving structural characters like /, :, @, and ? intact. encodeURIComponent() encodes an individual component value, encoding those characters too. Use encodeURIComponent() for individual values and encodeURI() for full URLs.
A query string is the part of a URL after the ? character, containing key-value pairs separated by & (e.g. ?name=Alice&age=30). In JavaScript, URLSearchParams parses them automatically. Duplicate keys are allowed — URLSearchParams.getAll() returns all values for a key.
A URI (Uniform Resource Identifier) is the broadest term. A URL is a URI that specifies how to locate the resource (includes scheme and authority). A URN names a resource without specifying its location (e.g. urn:isbn:0451450523). In practice, 'URL' and 'URI' are often used interchangeably.