使用正则表达式实现WhatsApp风格的文本格式化转换

本文详细探讨了如何利用正则表达式将类似whatsapp的特殊符号（如`*`、`_`、`~`）转换为对应的html标签（``、``、``）。教程不仅涵盖了基本的转换逻辑，还深入讲解了如何处理whatsapp特有的复杂规则，例如字符前缀限制、符号重复次数限制以及组合格式化，并提供了具体的代码示例和注意事项，以实现精确且健壮的文本格式转换。

引言：文本格式化与正则表达式

在现代即时通讯应用和内容发布平台中，用户常常通过简单的标记符号（如星号、下划线、波浪线）来对文本进行加粗、斜体或删除线处理。为了在前端正确渲染这些格式，我们需要将这些标记转换为标准的HTML标签。正则表达式提供了一种强大而灵活的方式来解析和转换这类文本格式。然而，不同的平台（如WhatsApp、Stack Overflow）对这些标记的解析规则可能存在细微差别，例如对标记前导字符的限制或标记符号重复次数的限制。本教程将深入探讨如何使用正则表达式处理这些复杂的WhatsApp风格格式化规则。

基本文本格式化规则与挑战

WhatsApp等应用通常使用以下符号来表示文本格式：

• *文本*：加粗 (转换为 <b>文本</b>)
• _文本_：斜体 (转换为 <i>文本</i>)
• ~文本~：删除线 (转换为 <s>文本</s>) 同时，这些格式可以组合使用，例如 ~_*文本*_~ 表示加粗、斜体和删除线。

用户尝试的初步正则表达式

一个基础的正则表达式可以相对简单地实现上述转换，例如：

text
    .replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g, '<b>$1</b>')
    .replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g, '<i>$1</i>')
    .replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g, '<s>$1</s>');

这段代码利用了非捕获组 (?:...) 和负向先行断言 (?!\s) 来确保开放标记后不能立即跟空格，同时捕获中间的文本内容。然而，这种方法在面对WhatsApp特有的复杂规则时会显得力不从心。

WhatsApp的特殊规则

WhatsApp的文本格式化规则比简单的标记匹配更为严格，主要体现在以下几个方面：

1. 前导字符限制：

   • 某些字符（如逗号 ,、冒号 :、分号 ;、空格 `、下划线_、波浪线~、点.、换行符\n、星号*`）允许紧随其后的标记生效。
   • 但另一些字符（如 @）则会阻止标记生效。例如：
     • *this text is bold* -> <b>this text is bold</b>
     • ,*this text is bold* -> ,<b>this text is bold</b>
     • @*this text is not bold* -> @*this text is not bold* (保持不变)

2. 符号重复限制：

   • WhatsApp通常只识别单个或特定数量的标记符号。例如，使用两个星号 ** 可以实现加粗（虽然这与Markdown的语义不同，但这里是WhatsApp的特定规则），但使用三个或更多星号 *** 则可能导致格式化失败。
     • **this text is bold** -> <b>*this text is bold*</b> (注意，这里可能保留了一个星号，这取决于具体实现，但核心是实现了加粗)
     • ***this text is not bold** -> ***this text is not bold** (保持不变)

3. 组合格式化：

   • 多种格式可以嵌套或组合使用，例如 ~_*this text is bold, italic and strike-through*_~。这要求正则表达式能够正确识别并处理这些嵌套结构。

利用高级正则表达式实现WhatsApp规则

为了应对WhatsApp的这些复杂规则，我们需要引入更高级的正则表达式特性，特别是负向先行断言 (Negative Lookahead) 和 负向后行断言 (Negative Lookbehind)。

负向先行断言 (?!\s)

这个断言在前面的初步尝试中已经出现。它确保匹配的标记符号后面不能立即跟随一个空格。这对于防止 * text * 这样的格式被错误识别为加粗非常重要，因为WhatsApp通常要求标记符号紧贴着文本。

负向后行断言 (?<!...)

这是处理前导字符限制的关键。负向后行断言 (?<!pattern) 会检查当前匹配位置的前面是否不匹配 pattern。如果匹配 pattern，则整个表达式不会成功。通过在开放标记符号前使用此断言，我们可以排除那些不允许格式化生效的前导字符。

AssemblyAI

转录和理解语音的AI模型

65

查看详情

例如，(?<![{[?}\]]) 表示只有当当前位置的前一个字符不是 {、[、?、} 时，才允许匹配。这个模式可以根据WhatsApp的具体规则进行扩展，以排除更多不允许的前导字符（如 @）。

综合解决方案示例

结合负向先行断言和负向后行断言，我们可以构建一个更符合WhatsApp规则的正则表达式。以下是一个示例，它尝试处理前导字符限制和开闭标记后不能跟空格的规则：

var string = `
These should pass
  *this text is bold*, 
  _this text is italic_, 
  ~this text is strikethrough~. 
  ~_*this text is bold, italic and strike-through*_~

And, these should fail
  _ example_
  {*example*}
  example*
  example*
  @*this text is not bold*
  ***this text is not bold**
`;

// 优先处理最内层或最复杂的组合格式
// 注意：处理组合格式通常需要多次替换，或者更复杂的单一正则。
// 这里我们按顺序处理，假设嵌套是外层包含内层。
// 例如，先处理加粗，然后斜体，然后删除线。
// 对于 ~_*text*_~ 这样的，顺序很重要。
// 我们可以从内到外，或者从外到内，取决于具体需求。
// 这里的方案是依次替换，这意味着如果一个文本已经被加粗，它里面的斜体或删除线会继续被处理。

// 1. 处理加粗
// (?<![{[?}\]]) 确保前面不是 {, [, ?, }, ] 等字符，可以扩展为 (?<![{@#$%\^&\*+\-=<>?/.,;:'"|`~])
// \*(?!\s) 确保 * 后面不是空格
// (.+?) 捕获中间的文本，非贪婪匹配
// \* 匹配结束的 *
string = string.replace(/(?<![{[?}\]])\*(?!\s)(.+?)\*/g, '<b>$1</b>');

// 2. 处理斜体
// 规则类似加粗
string = string.replace(/(?<![{[?}\]])_(?!\s)(.+?)_/g, '<i>$1</i>');

// 3. 处理删除线
// 规则类似加粗
string = string.replace(/(?<![{[?}\]])~(?!\s)(.+?)~/g, '<s>$1</s>');

console.log(string);

代码解释：

• string.replace(...): 这是一个链式替换操作，意味着每种格式（加粗、斜体、删除线）都会独立地被处理。这种顺序处理对于处理组合格式非常有效，因为一个已经被转换的HTML标签内部的文本仍然可以被后续的正则表达式匹配和转换。
• (?<![{[?}\]]): 这是一个负向后行断言。它确保在匹配开放标记符号（*、_、~）之前，不会出现字符集合 {、[、?、} 中的任何一个。这解决了部分前导字符限制问题。如果WhatsApp有更多限制字符（如 @），可以将它们添加到这个字符集中。
• \* / _ / ~: 匹配字面意义上的星号、下划线或波浪线，作为开放标记。
• (?!\s): 这是一个负向先行断言。它确保开放标记符号后面不能立即跟着一个空格。这是WhatsApp等应用中常见的规则，防止 * hello * 被错误识别。
• (.+?): 这是一个捕获组，使用非贪婪匹配 +? 来捕获开放标记和关闭标记之间的所有字符。$1 在替换字符串中引用这个捕获到的内容。
• /g: 全局标志，确保替换所有匹配项，而不仅仅是第一个。

运行上述代码，你会发现它能够成功转换 *this text is bold* 等，并保持 {*example*} 和 @*this text is not bold* 不变（因为 * 前面有 { 或 @，或者 * 后面有空格）。

注意事项与局限性

尽管正则表达式在处理这类问题上非常强大，但仍有一些注意事项和局限性：

1. 嵌套与复杂场景：

   • 上述顺序替换方法对于简单的嵌套（如 <b><i>text</i></b>）是有效的。但对于更复杂的、非标准嵌套或交错的标记（例如 *bold _italic* text_，这在Markdown中是非法的），简单的正则表达式可能无法正确解析，甚至可能产生意想不到的结果。
   • 当文本内容本身包含标记符号时（例如 this text has an *asterisk* inside），如果处理不当，可能会导致解析错误。更健壮的解决方案可能需要转义机制或更复杂的解析器。

2. 处理顺序：

   • 在有多种格式且可能嵌套的情况下，替换的顺序至关重要。例如，如果 ~_*text*_~ 存在，先处理最外层的删除线，再处理加粗，最后斜体，通常能得到正确的结果。反之，如果先处理加粗，可能导致删除线无法正确匹配。上述代码示例采取了从粗到细的替换策略，对于大多数WhatsApp风格的组合格式是有效的。

3. 性能考量：

   • 对于非常长的字符串和大量的替换操作，正则表达式的性能可能成为一个考虑因素。特别是当正则表达式中包含复杂的断言（如负向后行断言）时，可能会增加处理时间。

4. 规则扩展性：

   • 如果WhatsApp引入了新的格式规则或修改了现有规则，你需要相应地修改或扩展正则表达式。对于非常动态和复杂的格式化需求，一个完整的解析器（如基于状态机或AST）可能比纯正则表达式更为灵活和可维护。

总结

通过巧妙地运用正则表达式，特别是负向先行断言和负向后行断言，我们可以有效地将WhatsApp风格的文本标记转换为HTML格式，同时遵守其特有的复杂规则，如前导字符限制和符号后的空格限制。虽然正则表达式在许多场景下都表现出色，但对于极其复杂或需要高度健壮性的文本解析任务，可能需要结合其他解析技术或专门的Markdown解析库来达到最佳效果。理解这些高级正则表达式的用法，将大大提升你在文本处理方面的能力。

以上就是使用正则表达式实现WhatsApp风格的文本格式化转换的详细内容，更多请关注php中文网其它相关文章！