🧰 UtlKit

字符串转义工具:25 字符输入在 JS、HTML 与 URL 三种转义后分别变成 27、45 与 45 字符,9 个 JS 码、5 个 HTML 字符与百分号编码模式及往返规则一次讲清

粘贴一个含 &、引号与尖括号的 25 字符字符串:工具给出 JS 转义后 27 字符、HTML 转义后 45 字符与 URL 转义后 45 字符,6 种模式与往返逆操作,全部在浏览器内完成。

字符串在跨系统传输时最容易出问题。JavaScript 字符串里的双引号、HTML 属性里的 &、查询参数里的空格:每个目的地都有自己的危险字符与中和方式。字符串转义/反转义 工具把粘贴的字符串转成对应该目的地的安全形式,也可反向还原,全部在浏览器内完成:不上传,不离开标签页。它提供 6 种模式,3 个目标 × 2 个方向:转义 JS、反转义 JS、转义 HTML、反转义 HTML、转义 URL、反转义 URL。取一个 25 字符的输入:一个含 & 与冒号的问候语,外加尖括号内的一段引号短语。HTML 转义后是 45 字符,URL 转义后也是 45,而这两个 45 字符的结果是两条不同的字符串,这正是重点所在。

6 种模式:3 个目标 × 2 个方向

JS 模式把 128 个 ASCII 码中的 9 个改写成两字符序列:反斜杠、双引号、单引号、换行、回车、制表符、退格、换页与 NUL 码。对 25 字符的示例,只有两个双引号变化,输出保留 & 与尖括号不动,共 27 字符;一个含真实制表符与真实换行的字符串,在这两个位置分别换回字面的反斜杠 t 与反斜杠 n。HTML 模式只改 5 个字符:& 换成 5 字符引用,两个尖括号换成 4 字符引用,双引号换成 6 字符引用,单引号换成数字引用。URL 模式即百分号编码。每个转义都有对应的反转义,所有转换都在粘贴时完成,没有服务器往返。

25 字符示例的 3 种目的地

把示例写清楚:一个问候语、一个 &、一个冒号,外加尖括号内的一段引号短语,共 25 字符。JS 转义在两个双引号前各加一个反斜杠,共 27 字符。HTML 转义把唯一的 & 换成 5 字符引用、两个双引号换成 6 字符引用、一对尖括号换成 4 字符引用:25 加 20,落在 45。URL 转义把 4 个空格、&、冒号、两个双引号与两个尖括号,即 10 个单字符,换成 10 个三字符百分号序列,总数也落在 45,这只是这个输入下的巧合。三种目的地,三种答案,输入从不被原地修改:工具始终把新字符串写入输出栏。

URL 转义:百分号编码保留什么

encodeURIComponent 原样保留 96 个可打印 ASCII 字符中的 71 个:62 个字母与数字,外加 9 个符号,即感叹号、单引号、两个圆括号、星号、点、减号、下划线与波浪号。其余全部变成百分号加两位十六进制。所以它是部件级编码器,不是 URL 编码器:对一条含查询串的 53 字符完整地址运行,斜杠、冒号、问号与等号都变成 %2F、%3A、%3F 与 %3D,得到 75 字符的部件串 https%3A%2F%2Futlkit.com%2Ftools%2Fstring-escape%2F%3Fq%3DTom%20%26%20Jerry。当问题是 URL 的一个部件还是整个 URL 时,URL 编解码器把这个决定显式拆开。反方向上,decodeURIComponent 遇到 %E0 这类残缺序列会抛出错误,工具捕获并显示错误信息,而不是半解码的字符串。

按目的地选模式

规则是目的地优先。将被 JS 解析器读取的代码用 JS 转义;将被解析为标记的文本或属性值用 HTML 转义;查询参数用 URL 转义。相邻工具覆盖边界:HTML 实体编解码器处理命名与数字引用,不间断空格即  ,省略号即 …;Base64 编解码器把类二进制载荷整体移出文本通道;Hex UTF-8 Base64 转换器在问题不是怎么引用而是字节是什么时,把同一批字节以十六进制、UTF-8 文本与 Base64 三种形式展示。

转义字符串与工具集的交集

转义很少孤立发生。当转义后的输出要进入 JSON 载荷,把它粘进JSON 格式化要么干净解析,要么直接指出是哪个字符弄坏了它。当输入来自满是隐形字符的剪贴板,空白字符清理在任何转义决定之前先让制表符与换行可见,于是输出里的反斜杠 t 是你送进去的制表符,而不是意外。

往返与双重转义陷阱

工具里每个转义都有逆向,走的是同一张 128 码表:JS 转义后接 JS 反转义,原字符串原样返回;URL 这一对同样可往返,十六进制对也不例外。单行道是双重转义。HTML 转义跑两遍,引用内部的 & 自己也会被转义,结果渲染成引用的可见文本,而不是它指向的字符,撤销需要两次反转义而不是一次。失败模式不是转义本身,而是转义两次,或用错模式转义一次。而当字符串的问题是结构而不是字符时,转义工具就不是对的仪器:HTML 格式化指南讲同一份文档的格式化一面。

相关工具

常见问题

为什么 HTML 转义模式要先转换 & 再转换其他字符?

因为该模式写出的 5 个引用 &、<、>、" 与 ' 自身都以 & 开头。单遍从左到右执行时,先替换 &,后面写出的 4 个引用只放一次,内置的 & 不再被扫描,25 字符示例恰好扩 20,落在 45。换成任何其他顺序都会把引用当场再转义一次,同一输入的输出会远长于 45。

JS 转义对 25 字符示例只改了 2 个双引号,是不是坏了?

没有。JS 转义只改写 128 个 ASCII 码中的 9 个:反斜杠、双引号、单引号、换行、回车、制表符、退格、换页与 NUL 码。& 与尖括号在 JavaScript 字符串里完全合法,所以原样通过,输出 27 字符,比输入多 2 个反斜杠。同一输入走 HTML 转义会到 45,因为在那个目的地,& 与两个尖括号才是危险字符。决定什么算危险的是模式,不是字符本身。

URL 转义模式把我的完整地址里的斜杠和问号都编码了,错了吗?

没有错,但这个模式是部件级编码器,不是 URL 编码器。encodeURIComponent 保留 96 个可打印 ASCII 字符中的 71 个,其余全部编码,包括斜杠、冒号、问号与等号,所以一条含查询串的 53 字符完整地址会输出 75 字符的部件串 https%3A%2F%2Futlkit.com%2Ftools%2Fstring-escape%2F%3Fq%3DTom%20%26%20Jerry。如果想把整个 URL 当作一个结构完整的单元处理,URL 编解码器把这个拆分显式做出来。反方向上,decodeURIComponent 遇到 %E0 这类残缺百分号序列会抛错,工具显示错误而不是半解码的字符串。

转义后再反转义,总能拿回原来的字符串吗?

对从未被转义过的输入,能。JS 转义接 JS 反转义,沿同一张 128 码表往返一次,输入原样返回;URL 这一对也能往返,十六进制对包括在内。失败来自另外两个方向。其一是双重转义:HTML 转义跑两遍,第二遍把第一遍写出的引用里的 & 也转义了,撤销需要两次反转义而不是一次。其二是反转义从未被转义的数据:输入一个不构成合法序列的百分号加两位数字,比如残缺的 %E0,decodeURIComponent 会抛错,工具显示错误而不是半解码的字符串。

为什么 25 字符示例在 HTML 转义与 URL 转义后都落在 45?

两笔不同的算术,同一个落点。HTML 转义给唯一的 & 加 4、给 2 个双引号各加 5、给 2 个尖括号各加 3:25 加 20,等于 45。URL 转义把 4 个空格、&、冒号、2 个双引号与 2 个尖括号,即 10 个单字符,换成 10 个三字符百分号序列,同样 25 加 20,同样 45。相等只是这个特定输入的巧合,而且这两个 45 字符的输出是两条不同的字符串:一条满是 & 引用,一条满是百分号三元组。每个目的地各自数自己的危险字符,碰巧收了同样的总数。

相关文章