javascript - 多个特殊字符替换

Question

我正在尝试重构一些代码:

const newValue = value
  .replace(/\{1\}/g, '<i class="ms ms-1 inline"></i>')
  .replace(/\{2\}/g, '<i class="ms ms-2 inline"></i>')
  ... etc etc
return newValue;

我不想每次都使用replace。

<小时/>

我一直在尝试以下方法但没有成功:

const mapObj = {
  '/\{1\}/': '<i class="ms ms-1 inline"></i>',
  '/\{2\}/': '<i class="ms ms-2 inline"></i>',
  ...
}
const reg = new RegExp(Object.keys(mapObj).join("|"), "g");
return value.replace(reg, (m) => mapObj[m]);

对于简单的替换，这通常效果很好，但是由于需要转义特殊字符({ 和 })，我的正则表达式模式显然出了问题在 mapObj 对象中。

Here is demo of the current simplified code .

如何修复 mapObj 中的模式 (/\{1\}/) 以使重构的代码正常工作？

Answer 1

如果您的替换确实相同，但 {1} 的 ms-1 和 {2 的 ms-2 除外}，然后使用捕获组:

return value.replace(/\{(\d)}/g, '<i class="ms ms-$1 inline"></i>');

$1 是捕获组的内容。该表达式与 {} 中的单个数字匹配；根据需要进行调整。

实例:

function process(value) {
    return value.replace(/\{(\d)}/g, '<i class="ms ms-$1 inline"></i>');
}

console.log(process("Testing {1} testing {2}"));

<小时/>

如果替换有所不同并且您确实需要映射它们，请使用函数回调:

const mapObj = {
    "{1}": "replacement for 1",
    "{2}": "different replacement for 2"
};
return value.replace(/\{\d}/g, m => mapObj[m] || "some default");

您可以使用捕获组来避免在 mapObj 的键中重复 {}。

实例:

const mapObj = {
    "{1}": "replacement for 1",
    "{2}": "different replacement for 2"
};
function process(value) {
    return value.replace(/\{\d}/g, m => mapObj[m] || "some default");
}

console.log(process("Testing {1} testing {2}"));