URL Parser: Extract URL Components Online
Parse any URL into protocol, host, pathname, query parameters, and hash. Understand URL structure instantly.
Try the free online tool mentioned in this guide:URL Parser
Understanding URL structure
A URL is composed of several parts:
Protocol — https:// or http:// determines how the request is made (secure or not).
Host — Domain name or IP address where the resource lives.
Port — Optional numeric port (defaults: 80 for HTTP, 443 for HTTPS). Only needed if non-standard.
Pathname — Path to the resource on the server (e.g., /users/123).
Query String — Key-value pairs after the ? (e.g., ?page=2&sort=name).
Fragment (Hash) — After the #, used for navigation within a page (not sent to the server).
Understanding these parts is essential when parsing URLs programmatically, building redirects, validating links, or analyzing incoming requests.
// Full URL with all components
https://mydevtools.tech:443/tools/json-formatter?lang=en&sort=asc#features
// Breakdown:
Protocol: https
Host: mydevtools.tech
Port: 443 (implicit for https, can be omitted)
Pathname: /tools/json-formatter
Query: lang=en&sort=asc
Fragment: featuresUsing the URL Parser online
Paste any URL and instantly see all components broken down: protocol, host, port, pathname, individual query parameters, and fragment. Useful when debugging URLs in logs, understanding API redirects, or validating user-provided URLs.
JavaScript URL parsing
The browser URL class parses any URL:
const url = new URL('https://mydevtools.tech/tools?lang=en&page=1#section');
console.log(url.protocol); // "https:"
console.log(url.hostname); // "mydevtools.tech"
console.log(url.pathname); // "/tools"
console.log(url.search); // "?lang=en&page=1"
console.log(url.hash); // "#section"
// Access individual query parameters
console.log(url.searchParams.get('lang')); // "en"
console.log(url.searchParams.get('page')); // "1"Common URL parsing tasks
Extract the domain from a URL — Get just the host without protocol or path.
List all query parameters — Iterate over every key-value pair in the query string.
Build a URL dynamically — Construct a URL by setting components programmatically.
Validate URL format — Check if a string is a valid URL (use try/catch with new URL()).
Relative vs absolute URLs — Resolve relative URLs against a base URL for proper link following.
Frequently asked questions
What is the difference between hash and query parameters?
Query parameters (?key=value) are sent to the server. The hash (#section) is used only in the browser for navigation and is not sent to the server.
How do I extract query parameters in JavaScript?
Use the URL class: new URL(urlString).searchParams.get("paramName")
Is a URL with special characters in the query string valid?
Special characters should be percent-encoded (e.g., space becomes %20). Use encodeURIComponent() to safely encode values before adding them to a URL.