JavaScript中RegExp构造函数传入变量作为匹配模式不生效问题求助

问题原因 #

你的问题本质是变量c中可能包含正则表达式元字符，例如.、*、+、?、^、$、|、()、[]、{}、\等。RegExp构造函数会将这些字符当作正则语法规则解析，而不是普通的文本字符匹配，所以才会出现变量传参匹配失败、字面量传普通字符串能正常运行的情况。

解决方案 #

方案1：对正则匹配字符串做转义处理 #

先实现一个正则特殊字符转义函数，构造正则前先对c做转义即可：

// 正则特殊字符转义工具函数
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

修改你原来的正则构造代码：

// 原来的代码
// reg= new RegExp(c, 'g');
// 修改为：
reg = new RegExp(escapeRegExp(c), 'g');

方案2（更推荐）：用数组管理选中值，避免正则匹配 #

你的场景完全不需要依赖正则做替换，直接维护一个选中值的数组，选中时追加、取消选中时移除，最后直接把数组内容拼接赋值给文本框即可，完全不会出现匹配错误、误替换的问题：

// 全局维护选中值数组
const selectedValues = [];

// 取消选中时的逻辑替换为：
const targetVal = '-' + b + '-' + a;
const delIndex = selectedValues.indexOf(targetVal);
if (delIndex > -1) {
  selectedValues.splice(delIndex, 1);
}
// 直接赋值给目标文本框
document.getElementById('ab').value = selectedValues.join('');

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