引言：理解字符串分割挑战
在数据处理和模板解析等场景中，我们经常需要根据特定的模式来分割字符串。一个常见的挑战是，当分割模式包含动态内容（例如 {{ text1 }} 中的 text1 是一个变量值）且模式内部或外部存在可变空白时，传统的 String.prototype.split() 方法往往力不从心。例如，我们可能需要将以下字符串：
{{ text1 }} 123 {{text1}}{{text1}} {{ text1}}134分割成一个数组，其中 {{...}} 形式的标记被视为一个独立的元素，且其内部的变量名被标准化（例如 {{ text1 }} 变为 {{text1}}），而标记之间的普通文本和空白则保持原样。期望的输出结果如下：
["{{text1}}"," 123 ","{{text1}}","{{text1}}"," ","{{text1}}","134"]这要求我们不仅要识别模式，还要精确地控制捕获的内容以及如何处理空白。此时，正则表达式成为解决此类问题的强大工具。
核心正则表达式解析
为了实现上述分割目标，我们构建了以下正则表达式：
/\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g让我们详细解析这个正则表达式的各个组成部分：
- \{\{ 和 \}\}：
- { 和 } 在正则表达式中是特殊字符，需要通过反斜杠 \ 进行转义，以匹配字面量的双大括号 {{ 和 }}。
- \s*:
- \s 匹配任何空白字符（包括空格、制表符、换行符等）。
- * 表示匹配前一个字符零次或多次。因此，\s* 用于匹配 {{ 和 }} 内部以及它们与内容之间可能存在的零个或多个空白字符。
- ([^}]+):
- 这是正则表达式的第一个捕获组。
- [^}] 匹配任何不是 } 的字符。
- + 表示匹配前一个字符一次或多次。
- 因此，([^}]+) 的作用是匹配并捕获 {{ 和 }} 之间、且不包含 } 的任何非空内容。这个捕获组将精确地提取出 variableValue（例如 text1），而不会包含其两侧的空白。
- |:
- 这是“或”运算符。它表示正则表达式可以匹配左侧的模式，也可以匹配右侧的模式。
- ([^{}]+):
- 这是正则表达式的第二个捕获组。
- [^{}] 匹配任何既不是 { 也不是 } 的字符。
- + 表示匹配前一个字符一次或多次。
- 这个捕获组用于捕获 {{...}} 标记之间或之外的普通文本内容。它会完整地捕获这些文本，包括其中的所有空白字符，这对于保留 123 或 ` ` 这样的空白片段至关重要。
- g:
- 这是全局匹配标志（Global Flag）。它指示正则表达式引擎在整个字符串中查找所有匹配项，而不是在找到第一个匹配项后就停止。
通过 | 运算符结合这两个模式，我们可以确保字符串中的所有部分，无论是 {{...}} 形式的标记还是它们之间的普通文本，都能被正确识别和捕获。
JavaScript 实现与结果处理
在 JavaScript 中，我们可以使用 String.prototype.matchAll() 方法结合上述正则表达式来获取所有匹配项。matchAll() 返回一个迭代器，其中每个元素都是一个匹配对象，包含了完整的匹配字符串以及所有捕获组的信息。
为了得到期望的输出格式，我们需要对 matchAll() 返回的每个匹配项进行后处理。具体来说，我们需要判断是哪个捕获组（第一个或第二个）匹配到了内容，并据此构建最终的字符串片段。
const input = `{{ text1 }} 123 {{text1}}{{text1}} {{ text1}}134`;
const regex = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;
const matches = [...input.matchAll(regex)].map(match => {
if (match[1] !== undefined) { // 如果第一个捕获组有值，说明匹配到 {{...}} 结构
// 重构 {{value}} 形式，使用第一个捕获组（即纯净的 variableValue）
return `{{${match[1]}}}`;
} else if (match[2] !== undefined) { // 如果第二个捕获组有值，说明匹配到非 {{...}} 结构
// 直接返回第二个捕获组的内容，保留原始空白
return match[2];
}
// 理论上，对于此正则表达式，不会出现 match[1] 和 match[2] 都为 undefined 的情况
return '';
});
console.log(matches);
// 预期输出: ["{{text1}}"," 123 ","{{text1}}","{{text1}}"," ","{{text1}}","134"]代码解析：
- [...input.matchAll(regex)]：将 matchAll 返回的迭代器转换为一个数组，数组的每个元素是一个匹配结果对象。
- .map(match => { ... })：遍历这个匹配结果数组，对每个匹配项进行处理。
- if (match[1] !== undefined)：检查第一个捕获组（对应 ([^}]+)）是否存在值。如果存在，说明当前匹配到的是 {{...}} 形式的标记。此时，我们利用 match[1] 中捕获到的纯净内容（例如 text1）重新构建 {{text1}} 形式的字符串。
- else if (match[2] !== undefined)：如果第一个捕获组没有值，则检查第二个捕获组（对应 ([^{}]+)）是否存在值。如果存在，说明当前匹配到的是 {{...}} 标记之外的普通文本或空白。此时，我们直接返回 match[2] 的内容，因为它已经包含了我们想要保留的所有空白。
这种处理方式确保了 {{...}} 标记内部的空白被标准化，而标记之间的空白则被精确保留，完全符合我们的需求。
处理动态变量值与 new RegExp 的考量
原始问题中提到“text1 只是一个变量值，可以改变”。值得注意的是，我们当前使用的正则表达式 /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g 并没有硬编码 text1 这个具体的字符串。它匹配的是 {{ 和 }} 之间的 任何内容。因此，无论 {{...}} 中是 text1、userName 还是 productID，这个正则表达式都能正确识别和提取。
何时需要 new RegExp？
只有当正则表达式的 模式本身 需要根据变量动态构建时，才需要使用 new RegExp() 构造函数。例如，如果你需要分割的模式是 {{ 加上一个特定的、由变量决定的字符串，再加上 }}，那么你可能需要这样做：
const dynamicVarName = "specificKey";
// 如果你需要匹配 {{specificKey}} 这种精确模式
const dynamicRegex = new RegExp(`\\{\\{\\s*${dynamicVarName}\\s*\\}\\}|([^{}]+)`, 'g');
// 然而，对于本教程中的问题，即匹配 {{任意内容}}，直接字面量正则即可
// 因为我们不关心 {{...}} 内部具体是什么，只关心其结构在本教程的场景下，由于我们只关心 {{...}} 的 结构 而不是其 内部的具体值，因此直接使用字面量正则表达式是更简洁和高效的选择。
注意事项与进阶思考
- 空白处理的精确性： 本方案通过 \s* 和捕获组的巧妙结合，实现了对 {{...}} 内部空白的标准化（去除），同时保留了 {{...}} 外部文本中的原始空白。如果你的需求是保留 {{...}} 内部的所有原始空白（包括 {{ 和 }} 之间的），则需要调整正则表达式，例如捕获 \{\{([^{}]+)\}\} 然后再处理。
- 性能考量： 对于极长的字符串或在性能敏感的应用中，复杂的正则表达式可能会消耗较多的计算资源。在极端情况下，可以考虑基于状态机的自定义解析器，但这通常会增加代码复杂
