URL 解析格式化工具

URL 结构解析，URL 参数格式化输出为可读的 YAML 结构

输入 URL

工具简介：URL 解析工具

URL 解析是将复杂的 URL 分解为可读结构化组件的过程。本工具通过解析协议、域名、路径、参数等各个组件，帮助开发者和用户理解 URL 结构，并以 YAML 格式输出结果，提供更好的可读性。

什么是URL 解析工具？

URL 解析工具用于拆解 URL 的协议、域名、路径、查询参数与片段，帮助快速定位链接问题。

如何使用

粘贴完整 URL。
工具自动拆解并展示各组成部分。
复制需要的字段或参数。

常见应用场景

排查参数传递与编码问题
对比不同环境下的链接差异
文档与接口说明中的 URL 结构展示

❓ 常见问题 FAQ

Q1：解析失败怎么办？
A：确认 URL 含协议头（如 https://）且格式完整。

Q2：参数没有显示？
A：检查是否包含 ? 与 & 分隔符，以及是否为空参数。

Q3：中文域名解析不正确？
A：可先转换为 Punycode 再解析，或确保浏览器自动处理。

✨ 主要特性

🔍 完整解析：分解所有 URL 组件，包括协议、主机、路径、参数
📊 YAML 输出：结构化的 YAML 格式输出，便于阅读
🌐 Unicode 支持：完美处理国际化域名和编码参数
⚡ 实时处理：即时解析，无需服务器请求
📋 复制结果：一键复制解析结果
🔧 错误处理：智能错误检测，提供有用建议

📖 使用示例

基础 URL 解析

输入 URL：

https://example.com/search?q=hello%20world&category=tools&page=1

解析结果：

protocol: https:
hostname: example.com
host: example.com
port: 443
pathname: /search
search: ?q=hello%20world&category=tools&page=1
origin: https://example.com
searchParams:
  - q: hello world
  - category: tools
  - page: 1

复杂 URL 解析（包含认证信息）

输入 URL：

https://user:pass@api.example.com:8080/v1/data?format=json&limit=10#section1

解析结果：

protocol: https:
username: user
password: pass
hostname: api.example.com
host: api.example.com:8080
port: 8080
pathname: /v1/data
search: ?format=json&limit=10
hash: #section1
origin: https://api.example.com:8080
searchParams:
  - format: json
  - limit: 10

🎯 应用场景

1. Web 开发与调试

在开发过程中分析 URL：

// 理解路由的 URL 结构
const url = 'https://myapp.com/users/123/profile?tab=settings&theme=dark'

// 解析后可以看到：
// - 基础路径：/users/123/profile
// - 参数：tab=settings, theme=dark
// - 这有助于设置路由处理器

2. API 开发

理解 API 端点结构：

// API 端点分析
const apiUrl = 'https://api.service.com/v2/users?include=profile&sort=name&page=1'

// 解析的组件帮助理解：
// - API 版本：v2
// - 资源：users
// - 查询参数：include, sort, page

3. SEO 分析

分析 URL 结构以优化 SEO：

https://blog.example.com/category/web-development/article/url-parsing-guide?utm_source=google&utm_medium=organic

组件：
- 域名：blog.example.com
- 分类结构：/category/web-development/
- 文章路径：/article/url-parsing-guide
- 跟踪参数：utm_source, utm_medium

4. 安全分析

检查 URL 的安全性：

https://suspicious-site.com/redirect?url=https%3A%2F%2Flegit-site.com&token=abc123

解析的组件揭示：
- 重定向参数包含编码的 URL
- 潜在的安全令牌
- 有助于识别钓鱼攻击

🔧 技术详解

URL 组件说明

协议 (protocol)：

用于访问资源的方案
示例：http:、https:、ftp:、file:
总是包含尾部的冒号

主机名 (hostname)：

域名或 IP 地址
示例：example.com、192.168.1.1、localhost
不包含端口号

主机 (host)：

主机名加端口（如果非默认端口）
示例：example.com、example.com:8080
对于默认端口（HTTP 的 80，HTTPS 的 443），端口被省略

端口 (port)：

连接的端口号
默认端口：80（HTTP）、443（HTTPS）
自定义端口：8080、3000 等

路径名 (pathname)：

URL 的路径部分
总是以 / 开头
示例：/、/users/123、/api/v1/data

搜索 (search)：

包含 ? 的查询字符串
示例：?q=search、?page=1&limit=10
如果没有查询参数则为空

哈希 (hash)：

包含 # 的片段标识符
示例：#section1、#top
用于客户端导航

源 (origin)：

协议 + 主机名 + 端口
示例：https://example.com、http://localhost:3000
用于 CORS 和安全策略

搜索参数 (searchParams)：

解析的查询参数作为键值对
自动进行 URL 解码
以对象数组形式呈现，便于理解

参数解码

工具自动解码 URL 编码的参数：

输入：?name=John%20Doe&email=john%40example.com
输出：
searchParams:
  - name: John Doe
  - email: john@example.com

国际化域名

支持国际化域名（IDN）：

输入：https://测试.example.com/path
输出：
hostname: 测试.example.com
host: 测试.example.com

💡 使用技巧

复制用于分析：使用复制功能将结果粘贴到文档或代码注释中
参数提取：关注 searchParams 部分以理解查询参数
安全审查：检查参数中的可疑重定向或编码内容
API 文档：使用解析结果清晰地记录 API 端点
调试：在开发过程中比较预期与实际的 URL 结构

⚠️ 常见问题

无效 URL：确保 URL 包含协议（http:// 或 https://）
编码字符：工具自动解码参数以提高可读性
默认端口：端口 80（HTTP）和 443（HTTPS）可能不会出现在主机字段中
片段处理：哈希片段仅在客户端使用，不会发送到服务器

🚀 开始使用

输入 URL：粘贴或输入要分析的 URL
解析：点击"解析 URL"按钮分解组件
查看结果：检查每个组件的 YAML 输出
复制结果：使用复制按钮保存结果供以后使用
载入示例：尝试示例以查看复杂 URL 的解析方式

隐私说明：所有 URL 解析都在您的浏览器中本地执行。不会向外部服务器发送数据，确保您的 URL 保持私密和安全。