编码加密 · URL / HTML 编码

URL 编码

encodeURIComponent/encodeURI/RFC 3986

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 98 次使用
encodeURIComponent / encodeURI / RFC 3986 · 四种模式 · 字符高亮 · 全本地
编码模式
encodeURIComponent
原文 / 输入plain text
0 字符
编码结果encoded
0 字符
当前方向 编码 → 原文 转 编码结果
字符高亮which chars got encoded · 朱砂 = 被编码
对照原文 → 编码结果,逐字符标记
(输入原文后,这里展示哪些字符被编码)
批量处理multi-line · 每行分别处理
多行输入one item per line
按当前模式逐行处理
输入(每行一项)
结果(行对行)
快速试: 中文 a&b(含空格与符号) · 含中文整 URL · 需 RFC3986 严格转义 · 已编码串(自动解码)
就绪 · 输入原文即时编码,粘贴含 % 串自动解码
第一节

关于本工具

About

写前端代码时,一个包含中文或特殊符号的 URL 传给后端,返回 400 错误,多半是没做编码。这个工具将字符串按 RFC 3986 转为百分号编码(%XX),区分 encodeURIComponent(完整转义)与 encodeURI(保留 #?/ 等字符),粘贴即转。编码在浏览器内完成,字符不离开本地——调试接口、拼 API 参数时随手用,不必再开控制台试错。

使用场景

接口联调传参数

前端开发小陈在联调登录接口时,后端要求密码字段必须经过 RFC 3986 规范编码,否则签名验签会失败。小陈用本工具将密码中的特殊字符(如 @、#、空格)一键转换为 %40、%23、%20,避免了因手动转义漏掉某个字符导致的 401 反复报错,联调时间从半天缩短到 10 分钟。

OAuth 回调 URL 拼接

独立开发者老张在接入微信 OAuth 2.0 时,需要将回调地址 https://example.com/callback?source=app 作为 query 参数传给授权服务器。直接拼接会导致 ?source=app 被解释为外层 URL 的参数,而非回调地址的一部分。老张用本工具对整个回调 URL 进行 encodeURIComponent 编码,确保内层参数被正确传递,授权流程一次跑通。

爬虫 URL 参数清洗

数据采集员小林从电商页面复制了一串商品链接,里面包含中文分类名「男装/外套」和 emoji 表情。直接发起请求时,服务器返回 400 错误。小林将链接粘贴到本工具,选择 encodeURI 模式,仅对中文和 emoji 进行编码,保留已有的斜杠和冒号结构,清洗后的 URL 请求成功返回 200,采集任务按时完成。

邮件模板嵌入跟踪链接

市场运营小周在编辑EDM邮件时,需要在「点击查看详情」按钮后拼接 utm_source=newsletter&utm_campaign=春季促销 等跟踪参数。邮件客户端对未编码的 & 和 = 处理不一致,导致部分用户点击后跳转到错误页面。小周用本工具将参数字符串整体编码后嵌入链接,各邮箱客户端打开均正常跳转,活动点击率数据准确记录。

API 文档示例参数生成

技术写作者小王在编写 RESTful API 文档时,需要提供包含中文、空格和特殊符号的 GET 请求示例。手动转义容易遗漏,且不同浏览器编码结果可能不一致。小王用本工具生成标准示例参数,同时对照 encodeURI 和 encodeURIComponent 的差异,在文档中清晰标注了两种模式的适用场景,开发者调用时减少了 80% 的编码相关工单咨询。

第二节

使用指南

Getting Started

使用步骤

  1. 1在输入框粘贴或键入待编码的文本,右侧预览区同步显示编码后的字符串
  2. 2点击「编码模式」下拉菜单,选择 encodeURIComponent(严格编码)或 encodeURI(保留部分字符)
  3. 3勾选「RFC 3986 严格模式」使编码结果符合 URI 规范(如空格转为 %20 而非 +)
  4. 4点击结果区任意编码片段自动复制到剪贴板,底部状态栏提示「已复制」

输入输出示例

输入输出说明
https://example.com/path?name=张三&age=20https%3A%2F%2Fexample.com%2Fpath%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20常规:完整 URL 编码,展示 encodeURIComponent 对冒号、斜杠、问号、& 号、中文均编码的特性
Hello World!Hello%20World%21常规:空格转 %20,感叹号转 %21,验证 ASCII 特殊字符的编码规则
边界:空字符串输入,工具应返回空字符串而非 null 或 undefined
aa边界:单字符且为字母,验证未保留字符(A-Z a-z 0-9 - _ . ~)不被编码
100%100%25边界:百分号本身需编码为 %25,验证 % 字符的转义处理
你好,世界!%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81易错:全角中文和标点(逗号、感叹号)均被编码,与 encodeURI 不同(encodeURI 不编码中文但编码标点)
a b ca%20b%20c易错:多个连续空格每个独立编码为 %20,不会合并为单个 %20

常见错误对照

1.混淆 encodeURIComponent 与 encodeURI

✗ 错误encodeURI('https://example.com/path?name=张三&age=20')
✓ 修复encodeURIComponent('张三') 单独编码参数值,再用 encodeURI 编码整个 URL

encodeURI 不编码保留字符(如 ? & #),适合编码整个 URL 路径;encodeURIComponent 编码所有非字母数字字符(包括 ? &),适合编码查询参数值。RFC 3986 规定参数值中的 ? & 必须转义。

2.手动拼接 URL 参数时漏掉编码

✗ 错误const url = 'https://example.com/search?q=' + userInput;
✓ 修复const url = 'https://example.com/search?q=' + encodeURIComponent(userInput);

用户输入可能包含 & = # 等 URL 保留字符,直接拼接会破坏 URL 结构。encodeURIComponent 将这些字符转义为 % 加十六进制值,确保参数值被正确传递。

3.误解空格编码:%20 与 + 的区别

✗ 错误decodeURIComponent('a+b') 期望得到 'a b'
✓ 修复decodeURIComponent('a%20b') 得到 'a b';application/x-www-form-urlencoded 中 + 才表示空格

RFC 3986 规定空格应编码为 %20,+ 号在 URI 中表示字面加号。只有 HTML 表单的 application/x-www-form-urlencoded 编码才用 + 表示空格。JavaScript 的 decodeURIComponent 不会将 + 解码为空格。

4.对完整 URL 使用 encodeURIComponent

✗ 错误encodeURIComponent('https://example.com/path?name=test')
✓ 修复encodeURI('https://example.com/path?name=test')

encodeURIComponent 会编码 : / ? # 等 URL 结构字符,导致 URL 不可用。正确做法:对 URL 整体用 encodeURI,只对参数值用 encodeURIComponent。

5.忘记解码后再使用数据

✗ 错误从 URL 参数中读取 '%E4%B8%AD%E6%96%87' 直接显示给用户
✓ 修复decodeURIComponent('%E4%B8%AD%E6%96%87') 得到 '中文' 再显示

URL 编码后的字符串是 ASCII 安全的传输格式,不是人类可读的。所有从 URL 参数获取的数据,在展示或处理前必须用 decodeURIComponent 还原。

6.对非字符串类型调用编码函数

✗ 错误encodeURIComponent(12345) 或 encodeURIComponent({key:'value'})
✓ 修复encodeURIComponent(String(12345)) 或 encodeURIComponent(JSON.stringify({key:'value'}))

JavaScript 的 encodeURIComponent 会隐式调用 toString(),数字变成 '12345' 没问题,但对象变成 '[object Object]' 完全无意义。应显式转换为字符串或 JSON。

7.多次编码导致数据损坏

✗ 错误encodeURIComponent(encodeURIComponent('中文')) 得到 '%25E4%25B8%25AD%25E6%2596%2587'
✓ 修复只编码一次:encodeURIComponent('中文') 得到 '%E4%B8%AD%E6%96%87'

第二次编码会将第一次产生的 % 编码为 %25,导致原始数据无法通过一次 decodeURIComponent 恢复。除非明确知道接收方会解码两次,否则永远只编码一次。

8.忽略 UTF-8 编码前提

✗ 错误在非 UTF-8 页面中使用 escape() 编码中文,再用 encodeURIComponent 解码
✓ 修复统一使用 UTF-8 编码:encodeURIComponent 默认使用 UTF-8 编码字符

encodeURIComponent 严格遵循 RFC 3986,将字符按 UTF-8 编码后再转 %xx。如果页面或服务端使用其他编码(如 GBK),会导致编码结果不匹配。现代 Web 应统一使用 UTF-8。

第三节

工作原理

How It Works

核心公式

encoded = % + hex(byte) 对每个非保留字符

变量说明

  • encoded编码后的百分号加两位十六进制
  • byte字符的 UTF-8 字节值,0–255

示例

字符 '中' 的 UTF-8 编码为 0xE4 0xB8 0xAD,三个字节分别转为 %E4 %B8 %AD,最终结果为 %E4%B8%AD。

原始字符串(含特殊字符)逐字符扫描判断是否需转义(RFC 3986 保留字)%XX 编码(UTF-8 字节)输出编码规则示例字母/数字/.-_~ → 原样保留空格 → %20(非 +)中文/特殊符号 → 按 UTF-8 转 %XX%XX
输入 / 输出节点 核心处理逻辑 编码转换结果
第五节

常见问题

Q & A
我复制了一串中文进去,编码后全是 % 号加字母数字,这正常吗?

正常。URL 编码就是把非 ASCII 字符(中文、日文、特殊符号等)转换成 % 后跟两位十六进制数的形式,这是 HTTP 协议的标准要求。比如“中”会变成 %E4%B8%AD。本工具默认使用 encodeURIComponent 算法(RFC 3986 标准),所有非保留字符都会被编码。如果看到 % 后不是两位字母数字,那可能是数据本身有问题或混入了其他编码结果。

这个工具和浏览器地址栏自动转的那个一样吗?

不一样。浏览器地址栏对 URL 的编码用的是 encodeURI,它不会编码 URL 中具有特殊含义的字符(如 #、?、&、/ 等),目的是保持 URL 结构完整。而本工具默认使用 encodeURIComponent,它会编码所有非字母数字字符,包括 #、?、& 等。如果拿本工具的结果直接拼到 URL 参数里,是正确的;如果拿去替换整个 URL 的路径部分,应该用 encodeURI 模式。

为什么我解码后得到的是乱码?

乱码通常是编码和解码使用的字符集不一致造成的。本工具解码时默认按 UTF-8 处理,如果原文本是用 GBK 或 ISO-8859-1 编码后再进行 URL 编码的,用 UTF-8 解码就会显示乱码。解决办法是确认原始文本的编码方式。本工具目前只支持 UTF-8 编码的编解码,如果遇到非 UTF-8 的编码数据,请先用其他工具转换编码后再处理。

空格编码后变成了 %20 还是 + ?

本工具使用 encodeURIComponent,空格会被编码为 %20。部分旧标准(如 application/x-www-form-urlencoded)会把空格编码为 +,但 RFC 3986 标准要求使用 %20。如果你对接的接口要求 + 号(比如某些旧版表单提交),本工具的结果可能不兼容。遇到这种情况,可以在结果中手动将 %20 替换为 +,或选择其他支持 + 号编码的工具。

这个工具是纯本地的吗?会不会把我的数据上传?

本工具完全在浏览器本地运行,所有编解码操作由 JavaScript 的 encodeURIComponent 和 decodeURIComponent 函数完成,不会将任何输入数据发送到服务器。即使断网也能正常使用。可以放心处理含密码、Token、个人信息等敏感内容的 URL 编码需求,数据不会离开当前设备。

我有一段很长的 JSON 需要编码,这个工具有长度限制吗?

理论上没有长度限制,实际受浏览器内存和 JavaScript 字符串最大长度限制(约 2^28 字符,即 2.68 亿字符)。但建议单次输入不超过几万字符,因为浏览器处理超大字符串时可能出现卡顿或假死。如果 JSON 特别大,建议分段编码,或使用支持流式处理的工具。本工具界面也没有设置字数计数,超大输入时无法预估处理进度。

encodeURI 和 encodeURIComponent 到底什么时候该用哪个?

简单判断:如果编码的是整个 URL 的路径或域名部分,用 encodeURI,因为它会保留 /、?、# 等结构字符。如果编码的是 URL 中某个参数的值(比如 ?key=value 里的 value),必须用 encodeURIComponent,否则参数里的 & 或 = 会破坏 URL 结构。举例:value 是 a&b,用 encodeURI 得到 a&b,拼接后 ?key=a&b 会导致歧义;用 encodeURIComponent 得到 a%26b,拼接后 ?key=a%26b 才是正确的。本工具默认 encodeURIComponent,也提供 encodeURI 选项。

我编码后的结果在微信里打开是乱码,怎么回事?

微信内置浏览器对 URL 编码的处理可能不标准,尤其是对 UTF-8 编码的中文。如果编码结果在微信里打开乱码,尝试以下方案:1)确认微信页面声明了正确的 charset(<meta charset='UTF-8'>);2)某些微信版本对 % 号有特殊处理,可以检查 URL 是否被微信自动截断或修改;3)部分旧版微信不支持某些 Unicode 字符的编码,建议升级微信版本。本工具编码结果是标准的,兼容绝大多数现代浏览器。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭