URL Parser

Parse and analyze URLs to extract protocol, hostname, port, pathname, query parameters, and hash fragments

The URL Parser tool breaks down URLs into their component parts, making it easy to inspect and understand URL structure. It extracts the protocol, hostname, port, pathname, query string, hash fragment, and provides a table view of all query parameters.

Features

• Complete URL component extraction
• Query parameter table display
• Port detection with defaults
• Hash fragment parsing
• Invalid URL error handling
• Supports all standard URL schemes

Use Cases

URL Debugging

Inspect URLs to understand their structure and troubleshoot issues

Query Analysis

Extract and review query parameters from API endpoints

Link Validation

Verify URL components are correctly formatted

Route Planning

Analyze URL patterns for routing and navigation logic

URL Structure

A URL consists of several components:

protocol://hostname:port/pathname?query#hash

Components

Component	Description	Example
Protocol	Scheme identifier	https:, http:, ftp:
Hostname	Domain or IP address	example.com, 192.168.1.1
Port	Network port	8080, 443 (default)
Pathname	URL path	/api/v1/users
Search	Query string	?id=123&type=admin
Hash	Fragment identifier	#section-2

Input Format

Enter any valid URL:

https://example.com:8080/path/to/page?key=value&foo=bar#section

The URL must include at least a protocol and hostname. Relative URLs (e.g., /path/to/page) are not supported.

Output Format

The tool provides two outputs:

1. Text Summary - Component breakdown
2. Query Table - Key-value pairs of query parameters

Text Output

protocol: https:
hostname: example.com
port: 8080
pathname: /path/to/page
search: ?key=value&foo=bar
hash: #section

Query Parameter Table

Key	Value
key	value
foo	bar

Examples

Basic URL

Parse a standard HTTPS URL.

Input:

https://www.example.com/products?category=books&sort=price

Output:

protocol: https:
hostname: www.example.com
port: (default)
pathname: /products
search: ?category=books&sort=price
hash: (none)

Query Parameters:

Key	Value
category	books
sort	price

Custom Port

URL with explicit port number.

Input:

http://localhost:3000/api/v1/users?limit=10

Output:

protocol: http:
hostname: localhost
port: 3000
pathname: /api/v1/users
search: ?limit=10
hash: (none)

Query Parameters:

Key	Value
limit	10

Hash Fragment

URL with anchor/fragment.

Input:

https://docs.example.com/guide/setup#installation

Output:

protocol: https:
hostname: docs.example.com
port: (default)
pathname: /guide/setup
search: (none)
hash: #installation

Query Parameters: (none)

Complex Query

URL with multiple query parameters.

Input:

https://api.example.com/search?q=javascript+tutorial&lang=en&page=2&limit=20

Output:

protocol: https:
hostname: api.example.com
port: (default)
pathname: /search
search: ?q=javascript+tutorial&lang=en&page=2&limit=20
hash: (none)

Query Parameters:

Key	Value
q	javascript tutorial
lang	en
page	2
limit	20

Query parameter values are automatically URL-decoded. + becomes a space.

IPv4 Address

URL with IP address as hostname.

Input:

http://192.168.1.100:8080/admin?token=abc123

Output:

protocol: http:
hostname: 192.168.1.100
port: 8080
pathname: /admin
search: ?token=abc123
hash: (none)

Query Parameters:

Key	Value
token	abc123

Implementation Details

From lib/tools/engine.ts:125-144:

function parseUrl(value: string) {
  try {
    const parsed = new URL(value.trim());
    const queryRows: Array<Record<string, string>> = [];
    parsed.searchParams.forEach((v, k) => 
      queryRows.push({ key: k, value: v })
    );
    return {
      output: [
        `protocol: ${parsed.protocol}`,
        `hostname: ${parsed.hostname}`,
        `port: ${parsed.port || '(default)'}`,
        `pathname: ${parsed.pathname}`,
        `search: ${parsed.search || '(none)'}`,
        `hash: ${parsed.hash || '(none)'}`,
      ].join('\n'),
      table: queryRows,
    };
  } catch {
    return { output: 'Invalid URL' };
  }
}

URL API

The tool uses the native JavaScript URL API, which:

• Validates URL syntax
• Handles URL encoding/decoding
• Provides structured access to components
• Supports IPv4, IPv6, and domain names

Default Ports

Protocol	Default Port	Explicit Port Example
http:	80	http://example.com:8080
https:	443	https://example.com:8443
ftp:	21	ftp://example.com:2121
ws:	80	ws://example.com:3000
wss:	443	wss://example.com:3001

When the port matches the protocol’s default, it’s shown as (default) in the output.

Common Patterns

Extract Query Parameters

const url = new URL('https://example.com?name=Alice&age=30');
const name = url.searchParams.get('name');  // "Alice"
const age = url.searchParams.get('age');    // "30"

Build URLs Programmatically

const url = new URL('https://api.example.com/search');
url.searchParams.set('q', 'javascript');
url.searchParams.set('limit', '10');
url.toString();
// → https://api.example.com/search?q=javascript&limit=10

Check Protocol

const url = new URL(input);
if (url.protocol === 'https:') {
  console.log('Secure connection');
}

Get Base URL

const url = new URL('https://example.com:8080/path?query#hash');
const base = url.origin;  // "https://example.com:8080"

Special Cases

Relative URLs

This tool requires absolute URLs. Relative URLs like /path/to/page will fail. To parse relative URLs, provide a base URL:

new URL('/path', 'https://example.com')
// → https://example.com/path

Encoded Characters

Query parameters are automatically decoded:

Input:  https://example.com?name=John%20Doe&email=user%40example.com
Output: name=John Doe, email=[e-mail]

Multiple Values

Query parameters with the same key:

https://example.com?tag=javascript&tag=tutorial&tag=beginner

In the table, only the last value is shown:

Key	Value
tag	beginner

To access all values, use url.searchParams.getAll('tag') in JavaScript.

URL Validation

The tool validates URLs using the WHATWG URL Standard. Invalid URLs return:

Invalid URL

Common invalid formats:

• Missing protocol: example.com/path ❌
• Relative path: /path/to/page ❌
• Invalid characters: https://example .com ❌
• Malformed syntax: https:/example.com ❌

Browser Support

The URL API is supported in all modern browsers:

• ✅ Chrome 32+
• ✅ Firefox 26+
• ✅ Safari 7+
• ✅ Edge (all versions)

Related Tools

• URL Encode/Decode - Encode/decode URL components
• RegExp Tester - Test URL patterns
• JSON Format/Validate - Format query params as JSON