URL 解析器

Q: 为什么我的 URL 被报告为无效？

解析器需要带协议的绝对 URL。`example.com/page` 是相对引用，请写成 `https://example.com/page`。

Q: URL 会被发送到别处吗？

不会，解析完全在你的浏览器中进行。

把任意 URL 拆分为协议、凭据、主机、端口、路径段、查询参数和片段，显示解码后的值并输出 JSON。在浏览器中运行。

URL 地址

协议（scheme）	https:
用户名	user
密码	pass
主机名	shop.example.com
端口	8080
路径	/products/shoes
路径片段（已解码）	1. products 2. shoes
查询字符串	?color=red&size=42
片段（hash）	#reviews
源（origin）	https://shop.example.com:8080
规范化 URL	https://user:pass@shop.example.com:8080/products/shoes?color=red&size=42#reviews

查询参数（2）

键	解码后的值
color	red
size	42

JSON

{
  "protocol": "https:",
  "username": "user",
  "password": "pass",
  "hostname": "shop.example.com",
  "port": "8080",
  "pathname": "/products/shoes",
  "search": "?color=red&size=42",
  "hash": "#reviews",
  "origin": "https://shop.example.com:8080",
  "params": {
    "color": "red",
    "size": "42"
  }
}

什么是 URL 解析器？

URL 解析器会把 URL 拆分为各个组成部分：协议、用户名、密码、主机名、端口、路径、路径段、查询字符串、各个查询参数和片段，并显示 origin 和规范化后的 URL。百分号编码的值会被解码，国际化主机名会同时以 punycode 和 Unicode 显示，重复的参数也会被保留。

如何使用 URL 解析器

粘贴绝对 URL，例如 https://user:pw@example.com:8080/a/b%20c?x=1&y=two#h。
查看组成部分表；未指定端口时，端口行会显示默认端口。
在查询参数表中查看每个解码后的键和值。
复制 JSON 块，在代码或测试中使用解析结果。

示例

输入

https://user:pw@example.com:8080/a/b%20c?x=1&y=two#h

输出

host example.com · port 8080 · path segments: 1. a, 2. b c · query ?x=1&y=two (x = 1, y = two) · fragment #h

何时使用 URL 解析器

适合调试跟踪链接、OAuth 重定向 URL、签名 URL 或带有许多参数的 API 调用。它只解析绝对 URL；对于相对路径，请先加上 https://example.com 之类的基础地址。它不会访问该 URL。

URL 解析器的工作原理

URL 由浏览器内置的 WHATWG URL 类解析，也就是浏览器导航时使用的同一个解析器，所以结果与真实浏览器行为一致（主机名小写、点段被解析、IDN 转为 punycode）。查询参数来自 URLSearchParams，它会把 + 解码为空格，并按 UTF-8 解码百分号转义。路径段用 decodeURIComponent 解码，如果包含无效转义则保持原样。