URL Parser: Extract URL Components Offline
Parse any URL into protocol, host, pathname, query parameters, and hash. Understand URL structure instantly and offline on your desktop.
Get the tool mentioned in this guide in the desktop app: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 in MyDevTools
Paste any URL and instantly see all components broken down: protocol, host, port, pathname, individual query parameters, and fragment. It runs offline on your desktop — 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.