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

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

在数据处理和模板解析等场景中，我们经常需要根据特定的模式来分割字符串。一个常见的挑战是，当分割模式包含动态内容（例如 {{ 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() 返回的每个匹配项进行后处理。具体来说，我们需要判断是哪个捕获组（第一个或第二个）匹配到了内容，并据此构建最终的字符串片段。

Zapier Agents

Zapier推出的Agents智能体，集成7000+应用程序

70

查看详情

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. 性能考量： 对于极长的字符串或在性能敏感的应用中，复杂的正则表达式可能会消耗较多的计算资源。在极端情况下，可以考虑基于状态机的自定义解析器，但这通常会增加代码复杂

以上就是如何使用正则表达式精确分割包含动态模式的字符串的详细内容，更多请关注php中文网其它相关文章！