JavaScript正则提取文本技巧

本文深入解析了JavaScript正则表达式在复杂字符串处理中的应用，重点讲解如何精准提取特定格式（如`{{ variable }}`）的文本块，并完整保留其间的普通文本内容及原始空格。文章详细阐述了核心正则表达式`\{\{\s*([^}]+)\s*\}\}|([^{}]+)`的构建原理，该表达式可同时匹配`{{...}}`标记和普通文本。通过结合`matchAll()`方法和条件逻辑，实现对字符串的精细化分割与内容提取。文中提供了一个完整的代码示例，演示了如何处理匹配项，确保输出结果符合精确要求，既能提取`{{}}`内的变量值并去除首尾空格，又能保留文本段落的原始空格。此方法适用于前端开发和数据处理等场景，可灵活应对各种复杂的字符串处理需求。

本教程将深入探讨如何使用JavaScript正则表达式精确地从复杂字符串中提取特定格式（如{{ variable }}）的文本块，同时保留其间的普通文本内容及其所有原始空格。文章将详细解析核心正则表达式的构建原理，并提供一个完整的代码示例，演示如何结合matchAll()方法和条件逻辑，以实现对字符串的精细化分割与内容提取，确保输出结果符合精确要求。

挑战：复杂字符串的精确分割与内容提取

在前端开发或数据处理中，我们经常需要从一段文本中提取特定模式的数据，同时保留这些数据之间的普通文本。例如，给定一个字符串： {{ text1 }} 123 {{text1}}{{text1}} {{ text1}}134

我们的目标是将其“分割”成一个数组，其中包含所有{{...}}形式的标记以及它们之间的普通文本，并严格保留所有空格，最终得到如下结果： ["{{text1}}"," 123 ","{{text1}}","{{text1}}"," ","{{text1}}","134"]

值得注意的是，{{...}}中的text1是一个变量，可以是任意字符串，并且其内部可能包含多余的空格（例如{{ text1 }}）。在最终输出中，我们希望{{...}}内部的变量值是经过去除首尾空格处理的，但{{}}本身以及普通文本段落的空格必须保留。

核心正则表达式的构建

要实现这种复杂的分割，我们需要一个能够同时匹配两种模式的正则表达式：一种是{{...}}形式的标记，另一种是标记之间的普通文本。

我们采用的正则表达式是：\{\{\s*([^}]+)\s*\}\}|([^{}]+)

下面我们详细解析这个正则表达式的组成部分：

1. 匹配 {{...}} 标记部分：\{\{\s*([^}]+)\s*\}\}

   • \{\{: 匹配字面量字符 {{。由于 { 在正则表达式中有特殊含义，需要使用反斜杠 \ 进行转义。
   • \s*: 匹配零个或多个空白字符。这用于处理 {{ 后面可能存在的空格。
   • ([^}]+): 这是第一个捕获组。
     • [^}]: 匹配任何不是 } 的字符。
     • +: 匹配前面的字符一次或多次。
     • 这个捕获组的作用是捕获 {{ 和 }} 之间实际的变量值（例如 text1），无论其内部有多少空格。
   • \s*: 再次匹配零个或多个空白字符，用于处理 }} 前面可能存在的空格。
   • \}\}: 匹配字面量字符 }}，同样需要转义。

   这个部分确保我们能够识别并提取出所有 {{ variable }} 形式的文本块，并且通过捕获组 ([^}]+) 拿到其内部的原始内容。

2. 匹配普通文本部分：([^{}]+)

   • |: 这是“或”操作符，表示匹配左边的模式或者右边的模式。
   • ([^{}]+): 这是第二个捕获组。
     • [^}{]: 匹配任何不是 { 或 } 的字符。
     • +: 匹配前面的字符一次或多次。
     • 这个捕获组的作用是捕获所有不属于 {{...}} 标记的普通文本内容。由于它匹配的是非 { 或 } 的字符，因此它会自动捕获标记之间的所有字符，包括空格。

3. 全局匹配标志：g

   • 在正则表达式的末尾添加 g 标志（global），表示执行全局匹配，找到所有符合条件的匹配项，而不是在找到第一个匹配项后就停止。

实现逻辑与代码示例

有了核心正则表达式，我们就可以使用JavaScript的String.prototype.matchAll()方法来获取所有匹配项。matchAll()方法返回一个迭代器，其中包含每个匹配的完整信息，包括完整匹配的字符串（match[0]）以及所有捕获组的内容。

关键在于如何处理每个匹配项，以达到我们精确的输出要求：

• 对于{{...}}模式的匹配，我们需要从第一个捕获组（match[1]）中获取变量值，对其进行trim()处理，然后重新构建成{{变量值}}的形式。
• 对于普通文本模式的匹配，我们需要直接使用第二个捕获组（match[2]）的内容，因为它已经包含了所有必要的空格。

下面是完整的JavaScript代码示例：

/**
 * 使用正则表达式精确分割字符串，提取特定格式文本和普通文本。
 * @param {string} inputString 待分割的输入字符串。
 * @returns {string[]} 包含分割结果的字符串数组。
 */
function splitStringWithComplexRegex(inputString) {
    // 核心正则表达式：
    // 1. \{\{\s*([^}]+)\s*\}\} 匹配 {{ ... }} 结构，捕获内部内容到 group 1
    // 2. | 或
    // 3. ([^{}]+) 匹配非 {{ }} 的任意字符，捕获到 group 2
    const regex = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;

    // 使用 matchAll 获取所有匹配项的迭代器
    const matchesIterator = inputString.matchAll(regex);

    // 将迭代器转换为数组，并对每个匹配项进行处理
    const result = [...matchesIterator].map(match => {
        // match[0] 是整个匹配到的字符串
        // match[1] 是第一个捕获组的内容 (即 {{...}} 内部的值)
        // match[2] 是第二个捕获组的内容 (即普通文本)

        // 判断是哪种类型的匹配：
        if (match[1] !== undefined) {
            // 如果第一个捕获组有值，说明匹配到的是 {{...}} 结构
            // 对捕获到的内部内容进行 trim()，然后重新构建 {{内容}}
            return `{{${match[1].trim()}}}`;
        } else if (match[2] !== undefined) {
            // 如果第二个捕获组有值，说明匹配到的是普通文本
            // 直接返回捕获到的普通文本，保留其所有空格
            return match[2];
        }
        // 理论上不会走到这里，但作为兜底，返回完整匹配（match[0]）
        return match[0];
    });

    return result;
}

// 示例用法：
const input = `{{ text1  }} 123 {{text1}}{{text1}}  {{  text1}}134`;
const splitResult = splitStringWithComplexRegex(input);

console.log("原始字符串:", input);
console.log("分割结果:", splitResult);

// 验证输出是否符合预期
// 预期结果：["{{text1}}"," 123 ","{{text1}}","{{text1}}","  ","{{text1}}","134"]

代码输出：

原始字符串: {{ text1  }} 123 {{text1}}{{text1}}  {{  text1}}134
分割结果: [ '{{text1}}', ' 123 ', '{{text1}}', '{{text1}}', '  ', '{{text1}}', '134' ]

可以看到，输出结果与我们预期的完全一致。

注意事项

1. matchAll() 与 split() 的选择： 尽管问题标题提到了“split”，但JavaScript的String.prototype.split()方法通常用于根据分隔符来分割字符串，分隔符本身会被移除。而本例中，我们既需要保留“分隔符”（即{{...}}标记），又需要保留它们之间的文本。因此，matchAll()方法更适合这种“提取所有匹配段落”的需求，因为它能返回每个完整匹配项以及其内部的捕获组。

2. 捕获组的理解： 理解match数组中match[0]（完整匹配）、match[1]（第一个捕获组）、match[2]（第二个捕获组）的含义至关重要。正确地根据捕获组是否存在来判断匹配的类型，并进行相应的处理，是实现精确结果的关键。

3. 动态变量的融入： 如果{{...}}内部的特定词（如text1）需要是动态的，并且您希望正则能够识别这些动态词，那么您可能需要使用RegExp构造函数来动态创建正则表达式。例如，如果您要匹配{{后面跟着变量myVar的模式，可以这样做： const myVar = "someDynamicValue";const dynamicRegex = new RegExp(\{\{\s(${myVar})\s\}\}|([^{}]+), 'g'); 然而，在我们的解决方案中，([^}]+)已经足够通用，它会匹配{{和}}之间的任何非}字符，因此不需要特别针对内部变量进行动态正则构建，除非您有更复杂的内部模式匹配需求。

4. 性能考量： 对于非常大的输入字符串，正则表达式的性能可能成为一个考虑因素。但对于大多数常见的字符串处理场景，上述正则表达式和matchAll()的组合效率是足够的。

总结

通过本教程，我们学习了如何利用JavaScript的正则表达式和matchAll()方法，以一种灵活且强大的方式来处理复杂的字符串分割和内容提取任务。核心在于构建一个能够同时匹配多种模式的正则表达式，并结合条件逻辑来处理matchAll()返回的每个匹配项，从而实现对字符串的精细控制，确保最终输出结果的精确性。这种方法不仅适用于本例中的{{...}}模式，也可以推广到其他需要同时提取特定格式数据和普通文本的场景。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~