使用正则匹配多组双大括号内容时匹配错误，原因何在？

正则表达式的两个问题 #

你的正则/\{\{([^)]+)\}\}/存在两处关键问题：

• 字符集匹配错误：[^)]+是匹配所有非右括号)的字符，但我们要匹配双大括号内的内容，应该排除的是右大括号}，所以这里应该改成[^}]+（或更稳妥的非贪婪匹配.*?）。
• 缺少全局匹配标志：默认情况下match()只会返回第一个匹配结果，要匹配所有符合条件的内容，必须添加全局标志g。

另外，即使修正字符集并加g，match()也只会返回所有匹配的完整字符串（比如{{ foo }}、{{bar}}），如果要提取括号内的文本（捕获组内容），需要用matchAll()或循环调用exec()。

提取双大括号内容到数组 #

方法1：使用matchAll()（现代JS环境） #

const a = 'text:{{ foo }} {{bar}}';
const regex = /\{\{(.*?)\}\}/g;
// 提取捕获组内容并去除前后空格
const matches = Array.from(a.matchAll(regex), match => match[1].trim());
console.log(matches); // 输出 ["foo", "bar"]

这里用.*?非贪婪匹配，会在遇到第一个}}时停止，比[^}]+更通用（比如兼容括号内包含转义}的场景）。

方法2：使用exec()循环（兼容旧环境） #

const a = 'text:{{ foo }} {{bar}}';
const regex = /\{\{(.*?)\}\}/g;
const matches = [];
let match;
while ((match = regex.exec(a)) !== null) {
  matches.push(match[1].trim());
}
console.log(matches); // 输出 ["foo", "bar"]

实现最终目标：文本转换 #

不需要先提取再拼接，可以直接用replace()一步完成：

const a = 'text:{{ foo }} {{bar}}';
const result = a
  // 把开头非大括号的部分包裹单引号
  .replace(/^([^{]+)/, "'$1'")
  // 把每个{{内容}}替换成 + 内容
  .replace(/\{\{(.*?)\}\}/g, (_, content) => ` + ${content.trim()}`);

console.log(result); // 输出 'text:' + foo + bar

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