如何使用正则表达式精确分割包含动态模式的字符串

本文详细介绍了如何利用JavaScript中的正则表达式，高效且精确地分割包含特定动态模式（如 {{ variableValue }}）的字符串。我们将探讨核心正则表达式的构建逻辑，如何处理模式内部和外部的空白字符，并通过示例代码展示如何正确提取和重组分割后的字符串片段，以满足复杂的数据解析需求。

引言：理解字符串分割挑战

在数据处理和模板解析等场景中，我们经常需要根据特定的模式来分割字符串。一个常见的挑战是，当分割模式包含动态内容（例如 {{ 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"]

代码解析：

1. […input.matchAll(regex)]：将 matchAll 返回的迭代器转换为一个数组，数组的每个元素是一个匹配结果对象。
2. .map(match => { … })：遍历这个匹配结果数组，对每个匹配项进行处理。
3. if (match[1] !== undefined)：检查第一个捕获组（对应 ([^}]+)）是否存在值。如果存在，说明当前匹配到的是 {{…}} 形式的标记。此时，我们利用 match[1] 中捕获到的纯净内容（例如 text1）重新构建 {{text1}} 形式的字符串。
4. 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');
// 然而，对于本教程中的问题，即匹配 {{任意内容}}，直接字面量正则即可
// 因为我们不关心 {{...}} 内部具体是什么，只关心其结构

在本教程的场景下，由于我们只关心 {{…}} 的 结构 而不是其 内部的具体值，因此直接使用字面量正则表达式是更简洁和高效的选择。

注意事项与进阶思考

1. 空白处理的精确性： 本方案通过 s* 和捕获组的巧妙结合，实现了对 {{…}} 内部空白的标准化（去除），同时保留了 {{…}} 外部文本中的原始空白。如果你的需求是保留 {{…}} 内部的所有原始空白（包括 {{ 和 }} 之间的），则需要调整正则表达式，例如捕获 {{([^{}]+)}} 然后再处理。
2. 性能考量： 对于极长的字符串或在性能敏感的应用中，复杂的正则表达式可能会消耗较多的计算资源。在极端情况下，可以考虑基于状态机的自定义解析器，但这通常会增加代码复杂