JavaScript中利用正则表达式高级拆分字符串：处理动态模式与保留分隔符

1. 问题背景与挑战

在处理字符串时，我们经常需要根据特定的分隔符将其拆分成多个部分。然而，当分隔符本身也需要作为结果的一部分被保留，或者分隔符是一个包含动态内容的复杂模式时，标准的字符串split()方法就显得力不从心了。

例如，我们有以下输入字符串：

{{ text1  }} 123 {{text1}}{{text1}}  {{  text1}}134

我们的目标是将其拆分为一个数组，其中包含{{...}}形式的占位符（内部内容需要去除多余空格），以及这些占位符之间的文本内容。期望的输出结果是：

["{{text1}}"," 123 ","{{text1}}","{{text1}}","  ","{{text1}}","134"]

值得注意的是，{{ text1 }}中的text1只是一个示例值，实际应用中它可以是任何变量名，并且占位符内部及外部都可能存在不规则的空格。

2. 为什么标准 split() 方法不适用？

JavaScript的String.prototype.split()方法在遇到分隔符时会将其丢弃，只返回分隔符之间的内容。这与我们既要保留{{...}}模式本身，又要保留其间文本的需求相悖。因此，我们需要一种更强大的工具——正则表达式结合matchAll()方法。

立即学习“Java免费学习笔记（深入）”；

3. 利用 matchAll() 进行全面匹配

String.prototype.matchAll()方法返回一个迭代器，其中包含字符串与正则表达式的所有匹配项，包括捕获组。这使得我们能够捕获到所有我们感兴趣的部分，无论是分隔符模式还是分隔符之间的内容。

3.1 构建核心正则表达式

要同时捕获两种类型的字符串片段（{{...}}模式和非{{...}}文本），我们需要使用正则表达式的“或”逻辑（|）。

LibLib AI

中国领先原创AI模型分享社区，拥有LibLib等于拥有了超多模型的模型库、免费的在线生图工具，不考虑配置的模型训练工具

647

查看详情

const regex = /\{\{\s*([^}]+?)\s*\}\}|([^{}]+)/g;

让我们详细解析这个正则表达式：

• \{\{ 和 \}\}: 匹配字面量字符{{和}}。由于{和}在正则表达式中是特殊字符，需要使用反斜杠\进行转义。
• *`\s**: 匹配零个或多个空白字符（包括空格、制表符、换行符等）。这使得我们的正则表达式能够处理{{ text1 }}、{{text1}}`等多种空格情况。
• ([^}]+?): 这是一个捕获组，用于匹配{{和}}之间的内容。
  • [^}]: 匹配任何不是}的字符。
  • +: 匹配前面的字符一次或多次。
  • ?: 使+变为非贪婪匹配。虽然在这个特定场景下（没有嵌套的}}）贪婪和非贪婪结果可能相同，但非贪婪通常是匹配“直到下一个分隔符”时的更安全选择。
  • 这个捕获组的内容将作为match[1]返回。
• |: 这是正则表达式的“或”运算符。它表示匹配左侧的模式或者右侧的模式。
• ([^{}]+): 这是另一个捕获组，用于匹配{{...}}模式之间的文本。
  • [^{}]: 匹配任何不是{或}的字符。
  • +: 匹配前面的字符一次或多次。
  • 这个捕获组的内容将作为match[2]返回。
• g 标志: 全局匹配标志。这是至关重要的，因为它确保matchAll()方法会找到字符串中所有非重叠的匹配项，而不仅仅是第一个。

4. 处理匹配结果：精细化数据提取与格式化

matchAll()返回的每个匹配项都是一个数组，其中match[0]是完整的匹配字符串，而后续索引（如match[1]、match[2]等）则对应于正则表达式中的捕获组。根据我们正则表达式的结构，如果match[1]有值，说明匹配到的是{{...}}模式；如果match[2]有值，说明匹配到的是普通文本。

我们可以遍历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) {
        // 如果 match[1] 有值，说明匹配到的是 {{...}} 模式
        // 我们需要获取其内部内容 (match[1])，去除首尾空格，然后重新包裹
        return `{{${match[1].trim()}}}`;
    } else if (match[2] !== undefined) {
        // 如果 match[2] 有值，说明匹配到的是 {{...}} 之间的普通文本
        // 直接返回 match[2]，保留其内部所有空格
        return match[2];
    }
    // 理论上，由于正则表达式的全面性，不会有匹配到 match[0] 但 match[1] 和 match[2] 都为 undefined 的情况
    return match[0]; // 这是一个兜底，通常不会触发
});

console.log(matches);

运行上述代码，将得到与期望完全一致的输出：

[ '{{text1}}',
  ' 123 ',
  '{{text1}}',
  '{{text1}}',
  '  ',
  '{{text1}}',
  '134' ]

5. 关于动态变量值的说明

原始问题中提到了text1是一个变量。需要强调的是，我们所使用的正则表达式\{\{\s*([^}]+?)\s*\}\}|([^{}]+)是不关心{{...}}内部具体是什么内容的。它会匹配任何符合{{ 任意内容 }}模式的字符串。这意味着，无论{{和}}之间是text1、userName、productID还是其他任何字符（只要不是}），它都会被正确识别并捕获。这种通用性正是此解决方案的强大之处。如果需求是仅匹配特定的变量名，则需要动态构建正则表达式（例如，使用new RegExp('\s*{{\s*' + variableName + '\s*}}\s*')），但这与当前问题的通用模式拆分有所不同。

6. 注意事项与最佳实践

• matchAll() 与 split() 的选择: 当你需要保留分隔符本身作为结果的一部分时，matchAll()通常是比split()更合适的选择。
• 正则表达式的通用性: 所提供的正则表达式设计得足够通用，可以处理{{...}}模式内部和外部的多种空格情况，以及{{...}}模式与普通文本的交错。
• 结果处理的灵活性: map()函数允许我们对每个匹配项进行自定义处理。例如，我们对{{...}}内部的内容进行了trim()处理，并重新包裹，以满足特定的格式要求。如果不需要修剪内部空格，可以直接返回match[0]（对于{{...}}模式）或match[2]（对于普通文本）。
• 性能考量: 对于非常大的字符串和极其复杂的正则表达式，正则表达式的性能可能成为一个考虑因素。但在大多数常见场景下，这种方法是高效且可读的。

总结

通过结合String.prototype.matchAll()方法和精心设计的正则表达式，我们可以有效地解决JavaScript中复杂的字符串拆分问题，特别是当需要保留动态模式分隔符及其间内容时。这种方法提供了极大的灵活性，能够精确控制每个匹配部分的提取和格式化，从而满足各种高级字符串处理需求。

以上就是JavaScript中利用正则表达式高级拆分字符串：处理动态模式与保留分隔符的详细内容，更多请关注php中文网其它相关文章！