开发编码本地计算开箱即用内置示例不留痕迹

URL 解析器

粘贴一条完整网址，立即拆出协议、用户名密码、主机名、端口、路径、查询串与锚点；查询参数逐个列出并自动解码中文与特殊字符，origin 按 URL 标准拼出，方便核对跳转链接与排查埋点参数。

排查线上问题时经常要「看清」一条 URL：跳转白屏要看 query 参数有没有带对、埋点对不上要看参数名是不是拼错、跨域报错要看 origin 到底是什么。本工具把 URL 按标准结构逐项拆开：协议、用户信息、主机名、端口、路径、查询串、锚点，每项一行，空的项明确标出（无），不用再对着长串字符肉眼数问号和 & 符号。

查询参数会单独列成表：参数名与解码后的值并排显示，%E4%BD%A0%E5%A5%BD 直接还原成「你好」，+ 号按表单惯例解码成空格，解码失败时保留原文并继续解析其余参数。origin 按标准拼法给出——默认端口（http 80、https 443）不出现在 origin 里，与浏览器同源策略的判断口径一致。

—

这个工具解决你的问题了吗？

使用步骤

粘贴完整 URL：必须以 http:// 或 https:// 等协议开头。
看组成部分表：协议、用户名、主机名、端口、路径、查询串、锚点逐项列出。
看查询参数表：参数名与解码后的值并排，中文与特殊字符已还原。
看 origin：默认端口不显示，与浏览器同源判断口径一致。

计算原理与示例

URL 标准结构逐项拆解

URL 的标准结构是「协议://用户名:密码@主机名:端口/路径?查询串#锚点」。本工具按这个结构逐项拆开：先取协议，再剥掉锚点（# 之后）与查询串（? 之后），然后在剩余部分里找主机段——如果带 // 前缀，@ 之前是用户信息、第一个 / 之前是主机。每一项单独一行，空项明确标出（无），不用肉眼数符号。

主机、端口与 origin 口径

主机名与端口按标准规则拆分：普通域名看最后一个冒号（冒号后是纯数字就是端口）；IPv6 字面量因为在方括号里自带冒号，端口在 ] 之后解析。origin 按浏览器同源策略的口径拼出：http 的默认端口 80、https 的 443 不显示，其余端口（8080、3000）如实保留——跨域排查时以这一行为准。

查询参数的解码规则

查询参数用 & 分隔、= 连接键值，工具逐个解码列出：percent-encoding（%E4%BD%A0%E5%A5%BD → 你好）按 UTF-8 还原，+ 号按表单惯例解码为空格；某一段解码失败时保留原文，其余参数继续解析。锚点只在浏览器本地生效不会发给服务器，排查接口入参时看查询串而不是锚点。

代码示例

JavaScript URL API 一次拆全

// 浏览器与 Node 都有 URL：协议、主机、路径、查询串都已经是结构化字段
const u = new URL('https://user:pass@example.com:8443/a/b?x=1&y=%E4%B8%AD#frag');

u.protocol;        // 'https:'
u.hostname;        // 'example.com'
u.port;            // '8443'
u.pathname;        // '/a/b'
u.search;          // '?x=1&y=%E4%B8%AD'
u.hash;            // '#frag'
u.username;        // 'user'

// 查询参数用 searchParams 取，自动解码百分号编码
u.searchParams.get('y');                        // '中'
[...u.searchParams].map(([k, v]) => k + '=' + v);  // ['x=1', 'y=中']

// 只想要解码后的路径片段（不关心协议时用相对基准）
new URL('/a%20b/c', 'https://example.com').pathname;   // '/a%20b/c'
decodeURIComponent('/a%20b');                          // '/a b'

Python urllib.parse 拆解与还原

from urllib.parse import urlparse, parse_qs, urlencode, urlunparse

u = urlparse('https://user:pass@example.com:8443/a/b?x=1&y=%E4%B8%AD#frag')
print(u.scheme, u.netloc, u.path)          # https user:pass@example.com:8443 /a/b
print(u.hostname, u.port)                  # example.com 8443
print(parse_qs(u.query))                   # {'x': ['1'], 'y': ['中']}

# 重新拼装：先改分片再 urlunparse（注意 query 要自己 urlencode）
q = urlencode({'x': '1', 'y': '中'})
print(urlunparse(u._replace(query=q, fragment='')))

常见问题

为什么 URL 必须带协议才能解析？

协议决定了默认端口（http 80、https 443、ftp 21）和 origin 的拼法；不带协议的字符串无法可靠区分「example.com 是主机名」还是「example.com 是路径」。补上 http:// 或 https:// 即可解析。

端口 80 和 443 有什么特殊？

它们分别是 http 和 https 的默认端口，浏览器地址栏会自动省略，origin 里也不显示——http://a.com:80 和 http://a.com 是同一个源。其他端口（如 8080、3000）会明确显示。

参数值里的中文是解码后的吗？

是。%E4%BD%A0%E5%A5%BD 会解码成「你好」，+ 号按表单惯例解码成空格；遇到不符合 percent-encoding 规则的序列，工具保留原文并继续解析后面的参数，不会整体报错。

锚点（# 后面的部分）会发送给服务器吗？

不会。fragment 只留在浏览器本地，用于页面内定位，请求发出前就被浏览器剥掉了。排查接口参数时应关注查询串而不是锚点。

user:pass@ 这种写法是什么？

URL 标准允许在主机名前携带认证信息（现代浏览器已逐步弃用这种写法）。工具会把用户名与密码单独拆出来——看到陌生 URL 里有 @ 前缀时要警惕钓鱼，真实主机名在 @ 之后。

中文域名（xn-- 开头）会转换吗？

不会。浏览器发出的 URL 里国际化域名已经是 punycode 形式（xn-- 开头），工具按原样显示主机名，不做 punycode 与中文的互转，避免误解线上真实值。

URL 带首尾空格或换行能解析吗？

工具会先去掉首尾空白再解析；但中间的换行会破坏 URL 结构，粘贴前请确保是一条完整的单行地址。

延伸阅读

来自本站原创文章，讲清这个工具背后的算法与口径。