URL Parser & Builder — Dev Tools !

URL

Ctrl+Enter Run · Ctrl+Shift+C Copy · Esc Clear

Understand URL Parser & Builder

把 URL 拆解为协议、主机、端口、路径、查询参数和片段，也能由这些部分重新组装出合法的 URL。

How it works

解析使用浏览器内置的 WHATWG URL API，而不是正则表达式，因此它会施加与地址栏相同的归一化：把 scheme 和主机转为小写、消去默认端口（https://example.com:443 变成 https://example.com）、把国际化域名转为 punycode，并对必须编码的内容做百分号编码。查询参数通过 URLSearchParams 读取，它会解码每个键和值，并把查询字符串中的 "+" 视为空格。由各部分重新构造 URL 时会自动重新编码，这正是应当用它而不是拼接字符串的理由。

When to use it

拆解冗长的 OAuth 回调或追踪 URL，看清究竟有哪些参数、它们解码后是什么
检查一个你即将信任的跳转目标是否真的指向你以为的那台主机——要比较的是解析出的主机名字段，而不是整条 URL 的子串
用用户提供的查询值组装 URL，而不必手工编码与号、空格和斜杠
确认百分号编码的路径段（%2F 与 / 的区别）能按你的路由所期望的方式保留下来

Watch out for

重复的查询键会被合并。`?tag=a&tag=b` 既合法又常见，但扁平的键值视图只保留最后一个值——当重复项要紧时，请在代码中使用 `searchParams.getAll("tag")`。
`#` 之后的片段永远不会发送到服务器。它只存在于浏览器中，这就是把令牌放在那里能让它不进服务器日志、却挡不住页面上任何脚本的原因。
只有绝对 URL 才能被解析。像 `/v2/users` 这样的相对路径没有 scheme 和主机，必须先有一个基准 URL 才谈得上解析。
以 `https://user:pass@host/` 形式内嵌的凭据同样能被解析，而且它们还会出现在 Referer 头、浏览器历史和代理日志里。在这里看到它们，是移除它们的理由，而不是保留它们的理由。

Frequently Asked Questions

如何从 URL 中提取查询参数？

粘贴该 URL。工具会把查询字符串（? 之后的全部内容）切分成一个个 key=value 对。例如 ?page=2&sort=date&order=asc 会变成三个参数：page=2、sort=date、order=asc，每个都会被自动 URL 解码。

URL 的片段（#hash）有什么用？

片段（# 之后的全部内容）不会被发送到服务器——它只存在于浏览器中。它可以滚动到具有该 ID 的元素（id="section-2"）、在单页应用中触发客户端路由（React Router、Vue Router），或为 OAuth 流程承载状态（隐式授权中的 access_token）。

如何以编程方式构造带查询参数的 URL？

在 JavaScript 中使用 URLSearchParams API：const params = new URLSearchParams({page: 2, sort: 'date'}); url.search = params.toString()。它会自动正确编码特殊字符——请避免手工拼接字符串。

How to Use URL Parser & Builder

Paste or type your input in the input area above.
The tool processes your input automatically or click Run.
Copy or download the result using the action buttons.
Use Ctrl+Enter to run quickly from the keyboard.