高级正则表达式实现WhatsApp风格文本格式化-js教程-PHP中文网

高级正则表达式实现WhatsApp风格文本格式化

聖光之護

发布： 2025-11-21 13:37:00

原创

389人浏览过

高级正则表达式实现whatsapp风格文本格式化

本教程深入探讨如何利用正则表达式实现WhatsApp风格的文本格式化，包括加粗、斜体和删除线。文章将详细解析如何处理前导字符限制、起始空格限制以及符号数量等复杂规则，并通过具体的代码示例，指导读者将符号标记的文本准确转换为HTML标签，同时强调在实际应用中正则表达式的优势与局限性。

在现代即时通讯应用和内容创作平台中，通过简单的符号标记实现文本样式（如加粗、斜体、删除线）已成为一种常见且用户友好的功能。例如，WhatsApp允许用户使用星号(*)进行加粗，下划线(_)进行斜体，以及波浪线(~)进行删除线。然而，这些看似简单的规则背后，往往隐藏着一系列复杂的上下文条件，例如对前导字符、起始空格和符号数量的严格限制。本教程将指导您如何使用高级正则表达式来模拟并实现这些WhatsApp风格的文本格式化规则。

基础文本格式化规则

首先，我们来回顾一下基本的格式化符号及其对应的HTML标签：

*文本* -> 文本 (加粗)
_文本_ -> 文本 (斜体)
~文本~ -> <s>文本</s> (删除线)

对于简单的文本，我们可以使用以下正则表达式进行替换：

// 示例文本
let text = `
*这是一个粗体文本*,
_这是一个斜体文本_,
~这是一个删除线文本~.
`;

// 替换加粗
text = text.replace(/\*(.+?)\*/g, '<b>$1</b>');
// 替换斜体
text = text.replace(/_(.+?)_/g, '<i>$1</i>');
// 替换删除线
text = text.replace(/~(.+?)~/g, '<s>$1</s>');

console.log(text);
/*
输出:
<b>这是一个粗体文本</b>,
<i>这是一个斜体文本</i>,
<s>这是一个删除线文本</s>.
*/

登录后复制

上述正则表达式中的 (.+?) 是一个非贪婪匹配组，它会匹配两个相同符号之间的任意字符，并将其捕获到 $1 中，然后用相应的HTML标签包裹。

WhatsApp风格的复杂规则与挑战

WhatsApp的格式化规则比上述基础规则更为精细，主要体现在以下几个方面：

[置顶]Android中的JSON详细总结中文WORD版

JSON(JavaScript Object Notation) 定义：一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案（有点类似于正则表达式，获得了当今大部分语言的支持），从而可以在不同平台间进行数据交换。JSON采用兼容性很高的文本格式，同时也具备类似于C语言体系的行为。有需要的朋友可以下载看看

查看详情

前导字符限制： 并非所有字符都可以作为格式化符号的前导。例如，@*文本* 可能不会被格式化，而 , *文本* 则可以。这意味着在匹配开始符号时，需要考虑其前面的字符。
起始空格限制： 如果格式化符号后面紧跟着一个空格，通常不应进行格式化。例如，* 文本* 不会生效。
符号数量限制： 使用过多相同的格式化符号（例如 ***）可能会阻止文本被格式化，或者产生不同的解释。例如，***文本** 可能不会被识别为粗体。

解决方案：高级正则表达式的应用

为了应对这些复杂规则，我们可以引入正则表达式的负向先行断言 (Negative Lookahead) 和负向后行断言 (Negative Lookbehind)。

负向先行断言 (?!...) 确保在当前匹配位置之后不出现指定的模式。负向后行断言 (?<!...) 确保在当前匹配位置之前不出现指定的模式。

以下是针对加粗、斜体和删除线，并考虑部分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 (based on specific rules):
  @*this text is not bold* (前导字符限制)
  * this text is not bold* (起始空格限制)
  _ example_ (不完整的下划线匹配)
  {*example*} (前导字符限制)
  example* (不完整的星号匹配)
`;

// 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);

登录后复制

代码解析：

(?<![{[?}\]])：这是一个负向后行断言。它确保在匹配的 *、_ 或 ~ 符号之前，不会出现字符 {、[、?、} 或 ]。这模拟了WhatsApp中某些前导字符会阻止格式化的规则。请注意，这只是一个示例，WhatsApp实际允许或禁止的前导字符列表可能更复杂，需要根据实际情况调整此断言中的字符集。
(?!\s)：这是一个负向先行断言。它确保在匹配的 *、_ 或 ~ 符号之后，不会立即出现一个空白字符。这解决了 * 文本* 这种起始带空格不应格式化的问题。
(.+?)：这是一个非贪婪匹配模式，它会匹配任意字符（除了换行符）一次或多次，直到遇到下一个匹配的格式化符号。$1 则引用了这个捕获组中的内容。
连续替换： 对于像 ~_*this text is bold, italic and strike-through*_~ 这样的嵌套或组合样式，通过依次执行加粗、斜体和删除线的替换操作，可以实现多重样式的正确应用。例如，先将 *this text is bold, italic and strike-through* 转换为 ...，然后将 _..._ 转换为 ...，最后将 ~...~ 转换为 <s>...</s>。

注意事项与限制

正则表达式的局限性： 尽管正则表达式功能强大，但对于极端复杂的、依赖于深层上下文的规则（例如，需要解析整个语法树的规则），可能会变得非常复杂且难以维护。例如，严格处理 *** 这种多余符号的规则，可能需要更精细的模式或多步处理。
前导字符列表的完整性： 示例中的 (?<![{[?}\]]) 仅涵盖了部分限制。在实际应用中，您需要根据WhatsApp或其他平台的具体规则，详尽列出所有允许或禁止的前导字符。
性能考量： 对于非常大的文本字符串，多次执行复杂的正则表达式替换操作可能会带来一定的性能开销。
嵌套顺序： 尽管本示例中的独立替换可以处理多重嵌套，但在某些情况下，替换的顺序可能会影响最终结果。通常，建议从最内层或最外层开始，或者根据特定的需求来确定替换顺序。
未完全覆盖的规则： 本教程提供的解决方案侧重于处理前导字符和起始空格限制。对于诸如“超过两个相同符号不格式化” (***text** 不变) 或 **text** 转换为 *text* 等特殊规则，需要更复杂的正则表达式模式，可能涉及更高级的捕获组、条件匹配或分步处理逻辑。例如，要处理 **text** 转换为 *text*，可能需要一个先匹配 ** 的模式，然后在其内部再匹配 *。

总结

通过灵活运用正则表达式的负向先行断言和负向后行断言，我们可以有效地模拟WhatsApp等应用中复杂的文本格式化规则。这些高级特性使得正则表达式能够处理更精细的上下文条件，从而实现更准确的文本转换。然而，在设计和实现时，务必充分理解目标平台的具体规则，并权衡正则表达式的复杂性与可维护性，必要时可结合其他文本处理技术来达到最佳效果。

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