Javascript动态替换正则表达式匹配

Question

我有文本来自数据库，需要在显示它们之前进行修改。

。如下所示，在代码块中，文本可以有一个或多个{变量}，需要用html<i>标记替换，标记的类名来自变量。

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
const matched = string.match(/{(.*?)}/g); //["{icon_exit}", "{icon_plus}"]
//... replace both with `<i class="icon-${exit or plus}"></i>`
return string; //Lorem ipsum dolor sit <i class="icon-exit"></i> consectetur <i class="icon-plus"></i> elit.

Answer 1

您可以使用string#replace更改捕获的组

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
const newString = string.replace(/{(.*?)}/g, (_, match) => `<i class="${match.replace('_', '-')}"></i>`);
console.log(newString);

Answer 2

您可以使用replaceAll与正则表达式来匹配这些字符串并返回一个新字符串。

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
const regex = /{icon_(.+?)}/g;
const replaced = string.replaceAll(regex, (match, $1) => {
return `<i class="icon-${$1}"></i>`;
});
console.log(replaced);

Answer 3

保持简洁:

function replaceWithTag(string) {
return string
.replace(/{icon_exit}/g, '<i class="icon-exit"></i>')
.replace(/{icon_plus}/g, '<i class="icon-plus"></i>');
}
const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
console.log(replaceWithTag(string));