JavaScript正则表达式：精确提取带格式文本与普通文本段落-js教程-PHP中文网

JavaScript正则表达式：精确提取带格式文本与普通文本段落

心靈之曲

发布： 2025-07-17 21:30:15

原创

791人浏览过

javascript正则表达式：精确提取带格式文本与普通文本段落

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

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

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

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

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

核心正则表达式的构建

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

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

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

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

匹配 {{...}} 标记部分：\{\{\s*([^}]+)\s*\}\}
- \{\{: 匹配字面量字符 {{。由于 { 在正则表达式中有特殊含义，需要使用反斜杠 \ 进行转义。
- \s*: 匹配零个或多个空白字符。这用于处理 {{ 后面可能存在的空格。
- ([^}]+): 这是第一个捕获组。
  - [^}]: 匹配任何不是 } 的字符。
  - +: 匹配前面的字符一次或多次。
  - 这个捕获组的作用是捕获 {{ 和 }} 之间实际的变量值（例如 text1），无论其内部有多少空格。
- \s*: 再次匹配零个或多个空白字符，用于处理 }} 前面可能存在的空格。
- \}\}: 匹配字面量字符 }}，同样需要转义。
这个部分确保我们能够识别并提取出所有 {{ variable }} 形式的文本块，并且通过捕获组 ([^}]+) 拿到其内部的原始内容。
匹配普通文本部分：([^{}]+)

寻鲸AI
寻鲸AI是一款功能强大的人工智能写作工具，支持对话提问、内置多场景写作模板如写作辅助类、营销推广类等，更能一键写作各类策划方案。

68

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

登录后复制

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

注意事项

matchAll() 与 split() 的选择： 尽管问题标题提到了“split”，但JavaScript的String.prototype.split()方法通常用于根据分隔符来分割字符串，分隔符本身会被移除。而本例中，我们既需要保留“分隔符”（即{{...}}标记），又需要保留它们之间的文本。因此，matchAll()方法更适合这种“提取所有匹配段落”的需求，因为它能返回每个完整匹配项以及其内部的捕获组。
捕获组的理解： 理解match数组中match[0]（完整匹配）、match[1]（第一个捕获组）、match[2]（第二个捕获组）的含义至关重要。正确地根据捕获组是否存在来判断匹配的类型，并进行相应的处理，是实现精确结果的关键。
动态变量的融入： 如果{{...}}内部的特定词（如text1）需要是动态的，并且您希望正则能够识别这些动态词，那么您可能需要使用RegExp构造函数来动态创建正则表达式。例如，如果您要匹配{{后面跟着变量myVar的模式，可以这样做： const myVar = "someDynamicValue";const dynamicRegex = new RegExp(\{\{\s(${myVar})\s\}\}|([^{}]+), 'g'); 然而，在我们的解决方案中，([^}]+)已经足够通用，它会匹配{{和}}之间的任何非}字符，因此不需要特别针对内部变量进行动态正则构建，除非您有更复杂的内部模式匹配需求。
性能考量： 对于非常大的输入字符串，正则表达式的性能可能成为一个考虑因素。但对于大多数常见的字符串处理场景，上述正则表达式和matchAll()的组合效率是足够的。

总结

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

以上就是JavaScript正则表达式：精确提取带格式文本与普通文本段落的详细内容，更多请关注php中文网其它相关文章！