URL 解析器 & 构建器

什么是 URL 解析工具？

URL 解析工具是一款将完整的 URL 字符串拆解为各组成部分的在线工具。一个 URL 包含多个结构化部分：协议（scheme）、域名（host）、端口（port）、路径（path）、查询参数（query string）和哈希片段（hash）。理解 URL 的组成结构对 Web 开发者至关重要——它帮助调试 API 请求、分析路由规则、提取查询参数、构造新的 URL。本工具输入一个完整 URL 后，自动解析并高亮显示每个组成部分，同时展开查询参数为键值对列表，支持参数的编辑和重新构造 URL。

如何使用 URL 解析工具

1. 步骤一：输入 URL — 在输入框中粘贴完整的 URL 字符串（如 https://devtoolhub.cc:443/tools?url=parser&mode=advanced#section2）。
2. 步骤二：查看解析结果 — 工具自动将 URL 分解为协议、域名、端口、路径、查询参数、哈希等部分，每个部分独立显示并标注说明。
3. 步骤三：操作查询参数 — 查询参数以表格形式展示，可以修改参数值、添加/删除参数，修改后自动重新构造 URL。

常见使用场景

技术原理

URL 的语法规则由 RFC 3986 定义：scheme://user:pass@host:port/path?query#hash。JavaScript 内置的 URL 对象可以解析 URL：new URL(str) 自动拆解各部分。URLSearchParams 对象处理查询参数，支持 get()、set()、append()、delete() 等操作。

// URL 解析
const url = new URL('https://devtoolhub.cc:443/tools?url=parser#section');
console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "devtoolhub.cc"
console.log(url.port);       // "443"
console.log(url.pathname);   // "/tools"
console.log(url.search);     // "?url=parser"
console.log(url.hash);       // "#section"

// 查询参数操作
const params = new URLSearchParams(url.search);
params.get('url');           // "parser"
params.set('page', '2');     // 添加/修改参数
params.toString();           // "url=parser&page=2"

最佳实践与注意事项

• 使用 URL 对象而非字符串拼接来构造 URL，避免编码错误和格式问题。
• 注意端口为空字符串（默认端口）和 "0" 的区别——不写端口时 url.port 返回空字符串。
• URL 中的特殊字符需要正确编码，使用 URLSearchParams 自动处理参数编码。
• 相对 URL（如 /api/users）无法直接用 new URL() 解析，需要提供基础 URL 作为第二个参数。

常见问题