DevBolt
Processed in your browser. Your data never leaves your device.

How do I parse a URL into its components?

Paste any URL and instantly see it broken down into protocol, hostname, port, path, query parameters, and fragment. Query parameters are displayed in a searchable table. All parsing happens in your browser using the native URL API.

Parse a full URL
Input
https://api.example.com:8080/v2/users?page=3&sort=name#results
Output
Protocol: https
Host: api.example.com
Port: 8080
Path: /v2/users
Query: page=3, sort=name
Fragment: results
← Back to tools

URL Parser

Parse and inspect URL components. View protocol, host, path, query parameters, and hash.

Tips & Best Practices

Pro Tip

Use the URL API instead of regex for parsing

JavaScript's built-in URL class handles edge cases that regex misses: IPv6 addresses, IDN domains, percent-encoded characters, port numbers, and protocol-relative URLs. new URL(str) throws on invalid URLs, making it a validator and parser in one.

Common Pitfall

Query parameters can appear multiple times

The URL ?color=red&color=blue is valid — color has two values. URLSearchParams.get() returns only the first value. Use URLSearchParams.getAll('color') to get all values as an array. Many developers lose data by assuming single-value parameters.

Security Note

Open redirect vulnerabilities hide in URL parsing

If your app redirects to a URL from a query parameter (?redirect=https://evil.com), an attacker can phish your users. Always validate that redirect URLs are relative paths or belong to an allowlist of trusted domains. Check the parsed hostname, not just string prefix matching.

Real-World Example

Fragment identifiers never reach the server

The # portion of a URL (hash/fragment) is client-side only — browsers strip it before sending HTTP requests. This is why single-page apps use hash routing: the server always sees the same URL. It also means you cannot log or track fragment changes server-side.

Frequently Asked Questions

What are the parts of a URL?
A URL consists of several components: the scheme/protocol (https://), authority (user:pass@host:port), hostname (example.com), port (443), pathname (/path/to/resource), query string (?key=value&key2=value2), and fragment/hash (#section). DevBolt's URL Parser breaks any URL into all of these components with clear labels. The scheme identifies the protocol (HTTP, HTTPS, FTP). The hostname identifies the server. The path identifies the specific resource. Query parameters pass data to the server. The fragment identifies a section within the page and is never sent to the server.
How do I extract query parameters from a URL?
Paste the URL into DevBolt's URL Parser and it automatically extracts all query parameters into a readable key-value table. In JavaScript, use the built-in URL and URLSearchParams APIs: new URL(urlString).searchParams gives you a URLSearchParams object with .get(), .getAll(), .has(), and .entries() methods. For example, new URL('https://example.com?page=1&sort=name').searchParams.get('page') returns '1'. This is more reliable than manual string splitting because it handles URL encoding, duplicate keys, and edge cases correctly.
What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a full URL, preserving characters that are valid in URLs like :, /, ?, #, and &. It is used to encode an entire URL string. encodeURIComponent encodes a single URL component (like a query parameter value), converting all special characters including :, /, ?, #, and &. Use encodeURIComponent for individual parameter values to prevent them from being interpreted as URL syntax. For example, if a search query contains '&', encodeURIComponent converts it to '%26', preventing it from being read as a parameter separator.

Related Inspect Tools

HTTP

HTTP Status Codes

Complete HTTP status code reference — 1xx, 2xx, 3xx, 4xx, 5xx with detailed explanations and use cases

DT

Date Format Tester

Test date format patterns for strftime, date-fns, Moment.js, Go, and Java with live preview and token reference

DKR

Dockerfile Validator

Validate and lint Dockerfiles for syntax errors, security issues, best practices, and layer optimization

K8s

Kubernetes YAML Validator

Validate Kubernetes manifests for syntax, required fields, best practices, security, and resource limits