为何在书签脚本（Bookmarklet）中替换%20失效？

问题描述 #

在JS Fiddle中运行以下代码时，两次弹窗结果均为a b，符合预期：

let s = '%s';
let a = 'a%20b';
let b = 'a b';
a = a.replace(/%20/g, ' ');
alert(a);
b = encodeURIComponent(b);
b = b.replace(/%20/g, ' ');
alert(b);

但将这段代码保存为书签脚本运行时，第一次弹窗结果为a b，第二次却输出a%20b，与预期不符。

问题原因 #

核心问题出在浏览器对书签脚本URL的自动编码转义：

• 书签脚本以javascript:开头，本质是特殊格式的URL，浏览器会自动对其中的特殊字符进行编码处理：代码里的空格会被转为%20，同时正则表达式中的/%20/g会被浏览器解析为匹配空格的正则（/ /g），而非匹配字符串%20的正则。
• 第二次替换时，encodeURIComponent('a b')生成的是a%20b，其中并没有空格，所以转义后的正则无法匹配到目标内容，替换失败，最终输出a%20b。
• 而JS Fiddle中是直接执行代码，不存在书签URL的编码转义步骤，正则/%20/g能正确匹配字符串中的%20，因此替换成功。

解决方法 #

将正则表达式中的%20用十六进制转义符表示，避免被浏览器自动转义：

let s = '%s';
let a = 'a%20b';
let b = 'a b';
a = a.replace(/%20/g, ' ');
alert(a);
b = encodeURIComponent(b);
// 用\x25表示%的十六进制编码，组合成\x2520匹配%20字符串
b = b.replace(/\x2520/g, ' ');
alert(b);

内容的提问来源于stack exchange，提问作者CurioUser