如何使用正则分割字符串为数组，保留匹配项且不含捕获组内容？

你需要把字符串分割成数组，保留{{...}}这类匹配内容，但不想让捕获组的内部内容（比如bcd、f）混进数组里。举个例子：

原始字符串：

const string = "a {{bcd}} e {{f}}"

期望输出数组：

const result = ["a", "{{bcd}}", "e", "{{f}}"];

你试的代码里结果会包含捕获组的内部内容，核心问题是：JS的split方法会把正则中所有捕获组的匹配结果都插入到分割后的数组里。你的正则/(\{\{(.*?)\}\})/g有两个捕获组——一个是整个{{...}}，另一个是里面的内容，所以split后这两部分都会被放进数组。

解决方法 #

把不需要单独保留的捕获组改成非捕获组（用(?:...)替代普通的(...)），这样该组的匹配结果就不会被单独加入数组。修改后的正则只保留外层捕获组（用来保留整个{{...}}），内部匹配逻辑用非捕获组实现：

let string = "a {{bcd}} e {{f}}"

// 如果你不需要去掉原字符串里的空格，直接删掉下面这行即可
string = string.replace(/\s+/g, "");
const reg = /(\{\{(?:.*?)\}\})/g;
const result = string.split(reg).filter(item => item !== "");
console.log(result);
// 输出: ["a", "{{bcd}}", "e", "{{f}}"]

补充说明 #

• 非捕获组(?:pattern)仅完成匹配逻辑，不会把匹配内容存入捕获组，因此split时不会把这部分内容单独列出来。
• 加上filter(item => item !== "")是为了避免字符串开头/结尾就是匹配项时出现空字符串元素。
• 如果要保留原字符串里的空格，删掉replace行后结果会是["a ", "{{bcd}}", " e ", "{{f}}"]，可以再对非匹配项做trim处理：

  const result = string.split(reg).map(item => item.trim()).filter(item => item !== "");
  

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