URL Parser and Component Extraction

URLs contain several components. Learn how to parse and extract each part correctly.

URL Structure

https://username:password@example.com:8080/path/name?query=value#section
└─┬──┘└─────┬──────┘└────┬─────┘└────┬────┘└─────┬─────┘└───┬────┘└──┬──┘
 scheme   credentials    hostname    port      path      query   hash

Using the URL API

const url = new URL('https://user:pass@example.com:8080/path?query=123#section');

console.log(url.protocol);   // 'https:'
console.log(url.hostname);   // 'example.com'
console.log(url.port);       // '8080'
console.log(url.pathname);   // '/path'
console.log(url.search);     // '?query=123'
console.log(url.hash);       // '#section'
console.log(url.username);   // 'user'
console.log(url.password);   // 'pass'

Parsing Query Parameters

const url = new URL('https://example.com?a=1&b=2&c=hello');

// Get all params
console.log(url.searchParams.get('a'));  // '1'
console.log(url.searchParams.get('b'));  // '2'

// Iterate all params
for (const [key, value] of url.searchParams) {
  console.log(`${key}: ${value}`);
}

// Check if param exists
console.log(url.searchParams.has('a')); // true

// Add/modify params
url.searchParams.set('d', 'new');
url.searchParams.append('e', 'another');

Building URLs

const url = new URL('https://example.com');

// Set components
url.pathname = '/api/users';
url.searchParams.set('page', '1');
url.searchParams.set('limit', '10');

console.log(url.toString());
// https://example.com/api/users?page=1&limit=10

Query String Encoding

const params = new URLSearchParams();

// Special characters are auto-encoded
params.set('query', 'hello world');
params.set('name', 'John & Jane');

console.log(params.toString());
// query=hello+world&name=John+%26+Jane

// Manual encoding
const encoded = encodeURIComponent('hello world'); // 'hello%20world'

Common URL Operations

1. Get Base URL (without query)

const url = new URL('https://example.com/api?token=abc');
const base = url.origin + url.pathname;
// 'https://example.com/api'

2. Check if URL is absolute

function isAbsolute(urlString) {
  try {
    new URL(urlString);
    return true;
  } catch {
    return false;
  }
}

3. Resolve relative URL

const base = new URL('https://example.com/blog/');
const relative = './article-1';
const absolute = new URL(relative, base).href;
// 'https://example.com/blog/article-1'

4. Remove trailing slashes consistently

function cleanPath(pathname) {
  return pathname.replace(/\/+$/, '') || '/';
}

Browser vs Node.js

// Browser - uses current location
const currentUrl = new URL('/api', window.location.origin);

// Node.js (v10+)
const url = new URL('https://example.com');

Security Considerations

// Never insert user input without sanitization
const userInput = '"><script>alert(1)</script>';
const safe = encodeURIComponent(userInput);

// Be careful with javascript: URLs
const malicious = 'javascript:alert(1)';
// Always validate protocols

Common Mistakes

// Wrong - manually parsing
const parts = url.split('?');
const query = parts[1];

// Correct - use URL API
const parsed = new URL(url);
const query = parsed.searchParams;

Conclusion

Always use the URL API for parsing and building URLs. It handles encoding, special characters, and edge cases correctly.