The parts of a URL

https://ada:secret@shop.example.com:8443/search?q=shoes#results has a scheme (https), optional credentials (ada:secret), a host (shop.example.com), a port (8443; 443 is assumed for https when none is given), a path (/search), a query string (?q=shoes) and a fragment (#results). The scheme, host and port together make the origin, which browsers use for security decisions such as CORS and cookies.

The fragment is never sent to the server: it's only used by the browser, for example to scroll to a section or by single-page apps for routing.

How to use the URL Parser

Paste a URL, or press Sample. Without a scheme, https:// is assumed.
Read the parts of the URL, with path segments and parameters decoded.
Edit, add or remove query parameters: the URL updates as you type.
Copy the URL, or copy all the parts as JSON.

Examples

Repeated parameters and + as a space

Input

https://shop.example.com:8443/search?q=running+shoes&size=42&size=43#results

Output

{
  "href": "https://shop.example.com:8443/search?q=running+shoes&size=42&size=43#results",
  "origin": "https://shop.example.com:8443",
  "protocol": "https:",
  "username": "",
  "password": "",
  "hostname": "shop.example.com",
  "port": "8443",
  "pathname": "/search",
  "search": "?q=running+shoes&size=42&size=43",
  "hash": "#results",
  "searchParams": [
    ["q", "running shoes"],
    ["size", "42"],
    ["size", "43"]
  ]
}

size appears twice and both values are kept; URLSearchParams.get("size") would return only the first. The + in the query is decoded as a space.

An encoded redirect parameter

Input

https://example.com/login?next=%2Fdashboard%3Ftab%3Dbilling&utm_source=newsletter

Output

{
  "href": "https://example.com/login?next=%2Fdashboard%3Ftab%3Dbilling&utm_source=newsletter",
  "origin": "https://example.com",
  "protocol": "https:",
  "username": "",
  "password": "",
  "hostname": "example.com",
  "port": "",
  "pathname": "/login",
  "search": "?next=%2Fdashboard%3Ftab%3Dbilling&utm_source=newsletter",
  "hash": "",
  "searchParams": [
    ["next", "/dashboard?tab=billing"],
    ["utm_source", "newsletter"]
  ]
}

The next value is itself a URL, encoded so its ? and = don't end the parameter. The table shows it decoded.

A URL without a scheme

Input

localhost:3000/api/users?page=2

Output

{
  "href": "https://localhost:3000/api/users?page=2",
  "origin": "https://localhost:3000",
  "protocol": "https:",
  "username": "",
  "password": "",
  "hostname": "localhost",
  "port": "3000",
  "pathname": "/api/users",
  "search": "?page=2",
  "hash": "",
  "searchParams": [
    ["page", "2"]
  ]
}

new URL("localhost:3000/api") would treat localhost: as the scheme. The tool assumes https:// instead, and says so.

How it parses

The tool uses the WHATWG URL standard, the same parser as the URL class in browsers and Node.js, so what you see is what your code will get. Host names are lowercased, default ports are dropped, and characters that aren't allowed are percent-encoded in the normalised URL.

Query parameters are decoded as URLSearchParams decodes them: %XX escapes become characters and + becomes a space. Repeated names, such as size=42&size=43, are kept as separate rows, in order.

Limitations

When you edit parameters, the query string is rebuilt as URLSearchParams writes it: spaces become + and other characters are percent-encoded, which may differ from the original encoding.
Relative URLs (/path?x=1) need a base: paste a full URL.
Internationalised domain names are shown in their ASCII (punycode) form.

Frequently asked questions

Is the URL sent to a server?

No. The URL is parsed in your browser. That matters, because URLs often contain tokens, session IDs or personal data in their parameters.

Why does + become a space?

In query strings, + is the form-encoding of a space, and URLSearchParams decodes it that way. A literal plus sign must be encoded as %2B.

How do I read query parameters in JavaScript?

Use new URL(href).searchParams: .get("q") returns the first value, .getAll("size") all values of a repeated name, and Object.fromEntries(url.searchParams) an object (keeping only the last value of repeated names).

What is the origin?

The scheme, host and port together, for example https://shop.example.com:8443. Two URLs with the same origin can share cookies and read each other's responses; different origins need CORS.