/url-parser

URL Parser & Query Parameter Editor

Parse a URL into components, and add, edit or delete query parameters live in a clean interface.

About URL Parsing

A URL (Uniform Resource Locator) is made up of several defined components. This tool makes it easy to analyze a URL-especially long tracking links or API queries with many query parameters-and edit them in a clean interface.

  • Protocol: Specifies how data is transferred (e.g., HTTP or HTTPS).
  • Host: The website address or IP address.
  • Path: The specific directory or page on the server.
  • Query Parameters: Key-value pairs that send extra data to the page (starts with ? and separated by &).
  • Hash / Anchor: References a specific element ID or bookmark on the page (starts with #).

About this tool

The URL parser breaks a URL into its parts: protocol (https), host (example.com), port (443), path (/blog/post), query string (?q=hello), fragment (#section-2) and user info (user:pass@). Useful when debugging links, building URLs programmatically, extracting specific query parameters, or writing routing logic. It also handles IDN (internationalised domain names), URL-encoding, and relative URLs resolved against a base URL. All parsing happens in the browser.

How to use it

  1. Paste the URL you want to analyse.
  2. See every part broken out in a table.
  3. Click a single query parameter to copy its value.
  4. Use the "Base URL" field to resolve a relative URL.

Examples

Common URL
Inputhttps://verktoy.dev/en/qr?text=Hi&size=256#preview
Outputprotocol: https host: verktoy.dev path: /en/qr query: text=Hi, size=256 fragment: preview
With user info and port
Inputpostgres://alice:s3cret@db.example.com:5432/production
Outputprotocol: postgres user: alice password: s3cret host: db.example.com port: 5432 path: /production
Passwords in URLs are shown for demo only; do not use in production configs.
IDN
Inputhttps://ærlig.no/side
Outputhost (Unicode): ærlig.no host (ASCII/Punycode): xn--rlig-loa.no

Common use cases

  • Debug UTM parameters in tracking links.
  • Build dynamic deep-links for email or push notifications.
  • Extract OAuth callback parameters like code and state.
  • Write routing logic in frontend apps like React Router or Vue Router.
  • Check that IDN domains are correctly Punycode-encoded.

Frequently asked questions

What is URL-encoding?
The process of replacing "unsafe" characters in a URL with percent notation: space becomes %20, æ becomes %C3%A6, ? becomes %3F, and so on. RFC 3986 says only letters, digits and a few characters (- _ . ~) can appear raw; everything else must be encoded.
Are URL and URI the same?
Almost. URI (Uniform Resource Identifier) is the umbrella term. A URL is a URI that also says how to fetch the resource (protocol), while a URN is a URI that only names it (urn:isbn:0451450523). In practice URI and URL are used interchangeably.
Can a URL be infinitely long?
The standard sets no hard limit, but practical limits exist: browsers typically support 2000–8000 characters, HTTP servers are often capped at 4096 or 8192 bytes, and search engines prefer URLs under 2048 characters. For long values, use a POST body or shorter IDs with a database lookup.
Why isn’t the fragment (#) sent to the server?
The fragment is a client-side reference pointing to a place in the already-fetched document (e.g. a heading #chapter-3). The browser strips it before sending the HTTP request and uses it to scroll or trigger JavaScript. That is why SPAs can change # without reloading.

Technical background

The URL spec is the WHATWG URL Living Standard (url.spec.whatwg.org), which superseded RFC 3986 for web use. A URL is a record with fields: scheme, username, password, host, port, path (array), query, fragment. Parsing is non-trivial: the standard defines a 24-state state machine that handles edge cases like "http:example.com" (missing slashes), "file:///c:/" and relative references against a base. The browser URL API gives this for free: new URL(input, base) either throws TypeError or returns a valid URL object with readable fields. searchParams is a URLSearchParams instance that lets you get and set query parameters without manual string handling: url.searchParams.get('q'), url.searchParams.set('lang', 'no'), url.searchParams.append('tag', 'new'). For IDN, Punycode is handled automatically: typing ærlig.no makes url.hostname return xn--rlig-loa.no while url.host keeps the Unicode form. Our tool uses the same URL API as the browser and shows both Unicode and ASCII forms of the host.