JavaScript正则提取模板内容技巧

本文详细介绍了利用JavaScript正则表达式和`matchAll`方法，从包含特定模板标记（如`{{ variable }}`）的复杂字符串中提取内容的方法，符合百度SEO规范。针对前端开发中常见的字符串解析挑战，文章深入剖析了核心正则表达式`/\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g`的构造，该表达式能同时匹配模板标记和普通文本。通过示例代码，展示了如何处理`matchAll`的匹配结果，精确提取模板内容并规范化格式，同时保留原始文本的空格等格式信息。这种方法在处理需要保留分隔符及其内容的字符串解析任务时，具有高效、灵活的优点，为开发者提供了一种强大的字符串处理工具。

引言：理解复杂字符串解析挑战

在前端开发或数据处理中，我们经常需要从非结构化的文本中提取特定格式的数据。一个常见的场景是解析包含自定义模板标记的字符串，例如{{ text1 }}。传统的字符串分割方法（如String.prototype.split()）通常会丢弃分隔符，这在需要同时保留分隔符本身以及分隔符之间内容的场景下是不可行的。本教程将介绍如何利用JavaScript的正则表达式和matchAll方法，高效且精确地实现这一目标。

我们的目标是将形如 {{ text1 }} 123 {{text1}}{{text1}} {{ text1}}134 的输入字符串，解析为以下数组形式： ["{{text1}}"," 123 ","{{text1}}","{{text1}}"," ","{{text1}}","134"]

注意，这里不仅要识别 {{...}} 结构，还要处理其内部可能存在的空格，并保留非 {{...}} 部分的原始空格。

核心正则表达式解析

实现这一目标的关键在于构建一个能够同时匹配两种模式的正则表达式：

1. 模板标记，即 {{ 后跟变量名（可能包含空格），再跟 }}。
2. 模板标记之间的普通文本。

我们使用的正则表达式是：/\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g。下面对其进行详细解析：

• \{\{ 和 \}\}: 匹配字面量的大括号。在正则表达式中，{ 和 } 是特殊字符，因此需要使用反斜杠 \ 进行转义。
• \s*: 匹配零个或多个空白字符（包括空格、制表符、换行符等）。这用于处理模板标记内部（如{{ text1 }}中的` `）以及外部可能存在的空白。
• ([^}]+): 这是第一个捕获组。
  • [^}]: 匹配任何不是 } 的字符。
  • +: 匹配前一个字符或组一次或多次。
  • 因此，([^}]+) 捕获的是 {{ 和 }} 之间，且不包含 } 的所有内容，这正是我们想要的变量名部分。
• |: 这是正则表达式的“或”操作符，表示匹配其左侧的模式或右侧的模式。
• ([^{}]+): 这是第二个捕获组。
  • [^{}]: 匹配任何既不是 { 也不是 } 的字符。
  • +: 匹配前一个字符或组一次或多次。
  • 因此，([^{}]+) 捕获的是在 {{...}} 模板标记之外的普通文本。
• /g: 这是全局标志（global flag）。它告诉正则表达式引擎查找字符串中所有匹配项，而不是在找到第一个匹配项后就停止。

通过 | 运算符连接两个捕获模式，我们能够确保字符串的每个部分（无论是模板标记还是普通文本）都能被匹配到。

使用 matchAll 方法进行匹配

String.prototype.matchAll() 方法是处理此类复杂匹配场景的理想选择。它返回一个迭代器，其中包含所有匹配项的完整信息。每个匹配项都是一个数组，其第一个元素 ([0]) 是完整的匹配字符串，后续元素 ([1], [2], ...) 对应于正则表达式中的捕获组。

我们可以通过扩展运算符 ... 将 matchAll 返回的迭代器转换为一个数组，方便后续处理：

const input = `{{ text1  }} 123 {{text1}}{{text1}}  {{  text1}}134`;
const regex = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;
const allMatches = [...input.matchAll(regex)];

console.log(allMatches);
/*
输出示例（部分）：
[
  ["{{ text1  }}", "text1", undefined, index: 0, input: "{{ text1  }} 123 ...", groups: undefined],
  [" 123 ", undefined, " 123 ", index: 14, input: "{{ text1  }} 123 ...", groups: undefined],
  ...
]
*/

从输出中可以看出，每个匹配结果都包含 match[0]（完整匹配字符串）以及根据匹配模式不同而存在的 match[1]（捕获组1，模板内容）或 match[2]（捕获组2，非模板内容）。

后处理匹配结果：实现精确提取

仅仅获取匹配结果还不够，我们需要根据捕获组来精确地处理每个匹配项，以达到我们期望的输出格式：

• 对于 {{...}} 模板，我们需要将其内部的变量名去除首尾空格，然后重新构建为 {{变量名}} 的形式。
• 对于非模板的普通文本，我们需要保留其原始形式，包括其内部和首尾的空格。

这可以通过对 matchAll 的结果进行 map 操作来实现：

const matches = [...input.matchAll(regex)].map(match => {
    if (match[1] !== undefined) { // 如果捕获组1有值，说明匹配到的是 {{...}} 模板
        // 提取模板内部内容并去除首尾空格，然后重新构建为 {{内容}} 格式
        return `{{${match[1].trim()}}}`;
    } else if (match[2] !== undefined) { // 如果捕获组2有值，说明匹配到的是非模板文本
        // 直接返回捕获到的非模板文本，保留其原始空格
        return match[2];
    }
    // 理论上，由于正则表达式的全面性，不会有未被任一捕获组捕获的情况。
    // 但作为健壮性考虑，可以返回完整匹配或抛出错误。
    return match[0];
}).filter(Boolean); // 过滤掉任何可能的空字符串，确保结果纯净。

filter(Boolean) 在此场景下虽然可能不是严格必需（因为我们的正则设计通常不会产生空字符串），但它是一种良好的实践，可以移除数组中所有“假值”（如null, undefined, 0, ""等），确保结果数组只包含有效字符串。

完整示例代码

将上述所有部分整合，我们可以得到一个完整的解决方案：

const input = `{{ text1  }} 123 {{text1}}{{text1}}  {{  text1}}134`;
// 定义正则表达式：
// 1. \{\{\s*([^}]+)\s*\}\} 匹配并捕获 {{ ... }} 形式的模板内容（捕获组1）
// 2. | 或
// 3. ([^{}]+) 匹配并捕获非 {{ 或 }} 的普通文本（捕获组2）
// /g 全局匹配
const regex = /\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g;

// 使用 matchAll 获取所有匹配项，并进行后处理
const result = [...input.matchAll(regex)].map(match => {
    // 检查哪个捕获组匹配到了内容
    if (match[1] !== undefined) { // 如果是 {{...}} 模板
        // 提取模板内部的变量名，去除其首尾空格，然后重新封装为 {{变量名}}
        return `{{${match[1].trim()}}}`;
    } else if (match[2] !== undefined) { // 如果是非模板的普通文本
        // 直接返回原始文本，保留其所有空格
        return match[2];
    }
    // 理论上不会执行到这里，因为正则表达式覆盖了所有可能的情况
    return match[0];
}).filter(Boolean); // 过滤掉可能产生的空字符串（本例中通常不会产生）

console.log(result);
// 预期输出: ["{{text1}}"," 123 ","{{text1}}","{{text1}}","  ","{{text1}}","134"]

注意事项与最佳实践

1. 正则表达式的灵活性： 捕获组 ([^}]+) 允许变量名包含除了 } 之外的任何字符。如果你的变量名有更严格的命名规范（例如，只允许字母、数字、下划线），你可以将 [^}]+ 替换为更具体的模式，如 ([\w\d_]+)。
2. 性能考量： 对于非常长的字符串或需要频繁执行的场景，正则表达式的性能需要考虑。但对于大多数Web应用中的字符串解析任务，matchAll 结合合理的正则表达式通常是高效的。
3. 错误处理： 上述代码假设输入字符串格式基本正确。如果输入可能包含不完整的 {{ 或 }}（例如 {{abc），当前正则表达式会将其作为普通文本处理。根据具体需求，可能需要更复杂的正则表达式或额外的逻辑来识别并处理这些错误格式。
4. 替代方案： 对于更复杂的模板解析需求（例如嵌套模板、条件逻辑等），使用专门的模板引擎（如Handlebars, EJS, Vue/React的模板语法）会是更健壮和可维护的选择。但对于本教程中描述的简单提取任务，正则表达式是简洁而强大的工具。
5. trim() 的精确应用： 本教程的关键在于理解何时对匹配结果应用 trim()。我们只对从 {{...}} 内部捕获的变量名进行 trim()，以规范化模板标记；而对普通文本则不进行 trim()，以保留其原始格式，这正是为了满足题目中对输出格式的精确要求。

总结

通过巧妙地结合正则表达式的“或”操作符（|）和捕获组，以及 String.prototype.matchAll() 方法的强大功能，我们能够有效地解析复杂格式的字符串，并根据不同的匹配类型进行精细化的后处理。这种方法不仅能够准确地提取所需信息，还能灵活地保留或修改原始字符串的特定部分，是JavaScript中处理高级字符串解析任务的

今天关于《JavaScript正则提取模板内容技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！