JavaScript中如何将字符串内容替换为二维数组对应的映射值

实现思路 #

该需求的核心注意点是优先匹配长度更长的映射key，避免短key先被替换后破坏长key的结构，导致ab这类长key无法被正常识别。具体实现步骤如下：

1. 将二维映射数组按key的长度降序排序，保证长key优先进入匹配规则
2. 将排序后的数组转为对象，方便快速查询匹配结果
3. 提取所有key拼接为正则表达式，全局匹配字符串中的目标片段完成替换

实现代码 #

var str = 'a*b-ab';
var arrayElement = [['a', 'class 1'], ['b', 'class 12'],['ab', 'class 15'],['ac', 'class 2']];

// 按key长度降序排序，长key优先匹配
const sortedMapEntries = arrayElement.sort((prev, next) => next[0].length - prev[0].length);
// 转换为映射对象提升查询效率
const replaceMap = Object.fromEntries(sortedMapEntries);
// 生成全局匹配正则
const matchReg = new RegExp(sortedMapEntries.map(item => item[0]).join('|'), 'g');
// 执行替换
const result = str.replace(matchReg, matched => replaceMap[matched]);

console.log(result); // 输出：class 1 * class 12 - class 15

拓展说明 #

如果你的映射key中存在. * +等正则元字符，需要在拼接正则前对key做转义处理，避免正则匹配异常，转义逻辑参考如下：

function escapeRegExp(key) {
  return key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 生成正则的逻辑修改为
const matchReg = new RegExp(sortedMapEntries.map(item => escapeRegExp(item[0])).join('|'), 'g');

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