它做什么
把文本转换为百分号编码形式,或者反向转换。两个选择控制结果:方向(编码 或 解码)和范围(组件 或 完整 URI)。组件模式应用 encodeURIComponent,它会转义每一个保留字符,适合查询值使用。完整 URI 模式应用 encodeURI,它保持 ; / ? : @ & = + $ , # 不变,让整个 URL 仍然是一个 URL。格式错误的输入,比如解码时遇到孤立的 %,会显示清晰的错误,而不是给出错误的答案。
如何使用
- 选择方向:编码 或 解码。
- 选择范围:单个查询值用 组件,整个 URL 用 完整 URI。
- 在输入框中输入或粘贴。输出框随你的输入实时更新。
- 复制输出,或者复制一个把方向、范围和你的文本都编码进去的分享链接。
Swap 按钮翻转方向,并把当前输出带入输入。先编码一段内容,再点一下 Swap,工具就一键把它解码回来 - 无需重新输入。
示例
| 输入 | 设置 | 输出 |
|---|---|---|
hello world |
编码、组件 | hello%20world |
https://dev.cosmolabs.org/tools/url-encode |
编码、完整 URI | 不变 - 每个字符都是 URL 安全的 |
https://example.com/search?q=hello world&page=2 |
编码、完整 URI | https://example.com/search?q=hello%20world&page=2 |
path=/users/42 |
编码、组件 | path%3D%2Fusers%2F42 |
hello%20world |
解码、组件 | hello world |
百分号编码如何工作
URI 是 ASCII。这条规则从最早的 URL 规范一直延续到今天:URL 以 ASCII 字节传输,其他任何东西都必须装进转义序列里传输。转义序列总是三个字符:% 加上两个标明该字节的十六进制数字。空格是字节 0x20,所以以 %20 传输。é 在 UTF-8 中是两个字节(0xC3 0xA9),所以以 %C3%A9 传输。
JavaScript 内置两个编码器,范围开关就在两者之间做出选择:
encodeURIComponent(组件) |
encodeURI(完整 URI) |
|
|---|---|---|
| 转义范围 | 除 A-Z a-z 0-9 - _ . ! ~ * ' ( ) 以外的一切 |
相同,但同时保留 ; / ? : @ & = + $ , # |
| 适用对象 | 查询 值 | 整个 URL |
a/b?c=d |
a%2Fb%3Fc%3Dd |
a/b?c=d |
保留字符就是 URL 自身的标点,这正是这两个函数存在的原因。像 path=/users/42 这样的查询值必须转义其中的斜杠,否则接收方无法区分数据与结构:path=%2Fusers%2F42。整个 URL 则必须保留它们,否则 https:// 会塌缩成 https%3A%2F%2F。经验法则:用恰好匹配手中片段的最窄范围去编码,你就绝不会转义掉真正需要的结构。
解码执行相反的过程:每个 %XX 变回它标明的字节,这些字节再重新组装成 UTF-8 文本。后面没有跟着两个十六进制数字的 % 是格式错误的,工具会报告这一点,而不是去猜测。
值得了解
- 只解码一次,不要解码两次。 合法包含
%20的值解码成一个空格;对这个结果再解码一次,任何孤立的%都会变成错误。 - 分享链接携带模式、范围和文本,打开它就能恢复你的精确转换。
- 私密: 所有编码都在你的浏览器中本地运行,不会向任何地方发送任何内容。
- 相关工具: URL Inspector、HTML Entity Encoder、
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
Encode / Decode。