如何在JavaScript中替换含?、&的字符串？解决代码失效问题

为什么你的代码无法正常运行？ #

先给你揪出问题根源：?是正则表达式里的特殊元字符（表示匹配前面元素零次或一次），当你直接用new RegExp(i, 'g')时，代码里的?会被当作正则语法解析，而不是你要匹配的字面量问号，自然找不到目标字符串，替换就失效了。

需求一：如何替换字符串中的"?"或"&"？ #

如果你只是想批量替换这两个字符，有两种省心的方法：

方法1：正则表达式（推荐，全局匹配更高效） #

把特殊字符转义（加\）后，用正则全局匹配替换：

// 示例：把所有?和&替换成"-"
const originalStr = "user?name=foo&age=20";
const replacedStr = originalStr.replace(/\?|&/g, "-");
console.log(replacedStr); // 输出 "user-name=foo-age=20"

方法2：replaceAll（ES2021+环境可用） #

如果你的运行环境支持ES2021及以上，直接用字符串的replaceAll方法，不用处理正则转义：

const originalStr = "user?name=foo&age=20";
let replacedStr = originalStr.replaceAll("?", "-").replaceAll("&", "-");
console.log(replacedStr); // 输出 "user-name=foo-age=20"

需求二：修复你的批量替换代码 #

要解决包含特殊正则字符的字符串替换，核心是先把要匹配的字符串里的正则特殊元字符转义，再生成正则表达式。

第一步，写一个通用的正则转义函数，把所有正则特殊字符（比如?、*、.、\等）转成字面量：

function escapeRegExp(str) {
  // 匹配所有正则特殊字符，转义后返回
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

第二步，修改你的rp函数，创建正则前先转义map的键：

function rp(str, map) {
  for (var i in map) {
    // 先转义键里的特殊正则字符
    const escapedKey = escapeRegExp(i);
    str = str.replace(new RegExp(escapedKey, 'g'), map[i]);
  }
  return str;
}

// 调用测试
document.body.innerHTML = rp(document.body.innerHTML, { 
  'hello': '111', 
  '?test=666&test': '222' 
});

这样修改后，?test=666&test里的?会被转义成\?，正则引擎就会把它当作字面量匹配，替换就能正常生效了。

测试效果 #

运行修改后的代码，页面里的hello会变成111，?test=666&test会变成222，完全符合预期！

内容的提问来源于stack exchange，提问作者Ken.c