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]);

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

Here is demo of the current simplified code。

我该如何解决mapObj中的模式（/\{1\}/）才能使重构代码正常工作？

Answer 1

如果您的替换确实与ms-1的{{1}}和{1}的{{1}}不同，请使用捕获组：

ms-2

{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");。

实时示例：

{}

Answer 2

您的重构似乎使字符串，正则表达式以及两者的转义序列混淆了。

给出您的代码...

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]);

reg正则表达式将是/\/{1}\/|\/{2}\//g（正在寻找用斜杠包围的大括号），这不是您想要的。您想要类似/\{1\}|\{2\}/g
(m) => mapObj[m]不能按预期工作，因为value字符串将包含诸如"pay {1} to cast"之类的单词，而mapObj[m]正在寻找诸如{{ 1}}（注意大括号周围的斜杠）

您要做的是在正则表达式和字符串之间进行反向转换时，删除不必要的"\/{1}\/"斜杠。

推荐的解决方案：

多次替换特殊字符

2 个答案: