How to Parse a URL Into Its Parts: Protocol, Host, Path, Query, and Hash

You're debugging a redirect, reading an analytics link, or validating user input, and you need to know exactly what a URL is made of — which host it points to, what port, and every query parameter it carries. Eyeballing a long URL is error-prone; parsing it into named parts makes the structure obvious.

The anatomy of a URL

A full URL packs several components into one string. Consider:

https://user:pass@example.com:8080/path/to?foo=1&bar=2#section

That single line breaks down into:

• protocol — https: (the scheme)
• username / password — user / pass (credentials, rare and best avoided)
• hostname — example.com (the domain)
• port — 8080 (empty when it's the protocol default)
• pathname — /path/to
• search — ?foo=1&bar=2 (the query string)
• hash — #section (the fragment, never sent to the server)

Parsing with the browser's URL API

Every modern browser has a built-in URL object that parses these components correctly — including edge cases you'd get wrong with a regex. The URL Parser uses exactly this API and runs entirely in your browser, so nothing about the link you paste is sent anywhere:

const u = new URL(
  'https://user:pass@example.com:8080/path/to?foo=1&bar=2#section'
);

u.protocol; // "https:"
u.hostname; // "example.com"
u.port;     // "8080"
u.pathname; // "/path/to"
u.search;   // "?foo=1&bar=2"
u.hash;     // "#section"
u.username; // "user"

Working with query parameters

The most useful part is usually the query string, and URLSearchParams turns it into something you can actually read and manipulate. It also decodes percent-encoded values automatically:

const params = new URLSearchParams(u.search);

params.get('foo');          // "1"
params.has('bar');          // true
[...params.entries()];      // [["foo","1"], ["bar","2"]]

// repeated keys are common in the wild:
const p = new URLSearchParams('tag=a&tag=b');
p.getAll('tag');            // ["a", "b"]

Paste a URL into the parser and it lists every parameter as a key/value row, which is far faster than counting ampersands by hand in a tracking link stuffed with UTM tags.

Common pitfalls

A relative URL like /path?x=1 has no host, so new URL() throws unless you supply a base.

• Relative URLs need a base. Use new URL('/path?x=1', 'https://example.com') to resolve them, or the constructor throws a TypeError.
• Default ports are empty. For https://example.com/, u.port is "", not "443" — the default is implied, not stored.
• host vs hostname. host includes the port (example.com:8080); hostname never does. Grab the right one for your comparison.
• Repeated keys. params.get('tag') returns only the first value. Use getAll when a key can appear more than once.
• The hash stays client-side. Everything after # is stripped before the request leaves the browser, so servers never see it.

Related tools

If a parameter value looks garbled with %XX sequences, run it through the URL Encode / Decode tool to decode it cleanly, or to encode a value before you add it. When a query parameter itself carries a JSON blob, the JSON Formatter pretty-prints it once you've extracted it.

Conclusion

A URL is a structured record, not a flat string. Splitting it into protocol, host, port, path, query, and hash — with the browser's own URL and URLSearchParams APIs doing the parsing — turns a debugging guess into a certainty. Mind the details: supply a base for relative URLs, use getAll for repeated keys, and remember the hash never reaches your server.