本教程探讨如何利用正则表达式在JavaScript中实现类似WhatsApp的文本格式化，将特定符号（如*、_、~）转换为HTML标签（、、）。文章将详细介绍正则表达式的关键技术，包括负向先行断言和负向后行断言，以处理复杂规则如符号前后的字符限制和嵌套样式。同时，也将讨论现有方法的局限性，并提供代码示例以帮助开发者在实际项目中应用和优化。
在现代消息应用和富文本编辑器中，用户通常可以通过简单的标记（如星号、下划线、波浪线）来快速格式化文本，使其呈现为粗体、斜体或删除线。WhatsApp等应用更是将这些规则细化，引入了对前导字符、后导空格和标记数量的严格限制，使得实现完全兼容的格式化变得复杂。本教程旨在通过JavaScript和正则表达式，深入探讨如何处理这些复杂的文本格式化需求。
理解WhatsApp风格的格式化规则
要精确地模仿WhatsApp的文本格式化行为，我们需要理解其核心规则：
-
基本样式转换：
- *文本* 转换为 文本 (粗体)
- _文本_ 转换为 文本 (斜体)
- ~文本~ 转换为
文本(删除线) - 支持嵌套，例如 ~_*文本*_~ 转换为
文本
-
前导字符限制：
- 某些字符（如逗号,、冒号:、分号;、空格、下划线_、波浪线~、点.、换行符\n）可以出现在格式化标记之前，且不阻止格式化。例如 ,*文本* 应该变为 ,文本。
- 其他字符（如@）会阻止格式化。例如 @*文本* 应该保持不变。
-
后导空格限制：
- 格式化标记后面不能紧跟空格。例如 *_文本* 不应被格式化。
-
标记数量限制：
- 使用单个标记进行格式化。例如 **文本** 应该被解释为 *文本*，即只将最外层的 * 转换为 标签，内部的 * 保持不变。
- 如果标记数量过多（例如，三个或更多），则不应进行格式化。例如 ***文本** 应该保持不变。
基础正则表达式方法及其局限性
最初，我们可能会尝试使用简单的正则表达式进行替换：
// 基础替换方法示例 let text = "*this text is bold*, _this text is italic_, ~this text is strikethrough~."; text = text.replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g, '$1'); text = text.replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g, '$1'); text = text.replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g, '$1'); console.log(text); // 输出: this text is bold, this text is italic,this text is strikethrough.
这种方法能够处理最基本的格式化，并且通过 (?!\s) 确保标记后不是空格。然而，它无法处理更复杂的WhatsApp规则，例如：
- @*this text is not bold* 仍然会被格式化，因为它没有检查 @ 这个前导字符。
- ***this text is not bold** 也会被格式化，因为它只匹配单个 * 标记，无法识别三个 * 的情况。
- {*example*} 可能会被错误地格式化，因为它没有考虑 { 等特殊字符。
引入高级正则表达式技术
为了更精确地模拟WhatsApp的规则，我们需要利用正则表达式中的高级特性，特别是负向后行断言 (Negative Lookbehind) 和负向先行断言 (Negative Lookahead)。
- 负向先行断言 (?!...)：确保匹配的模式后面不跟着特定的子模式。
- 负向后行断言 (?：确保匹配的模式前面不跟着特定的子模式。
结合这些技术，我们可以构建更强大的正则表达式来处理上述复杂情况。以下是基于提供的解决方案，并进行详细解释和扩展的代码示例：
/** * 格式化类似WhatsApp风格的文本。 * 该函数将特定的标记（*、_、~）转换为相应的HTML标签（、、）， * 并尝试遵循WhatsApp的一些格式化规则，例如避免在特定字符后或标记后跟空格时进行格式化。 * * @param {string} text 待格式化的原始文本。 * @returns {string} 格式化后的HTML字符串。 */ function formatWhatsAppLikeText(text) { let formattedText = text; // 规则1: 粗体 (*text*) // 匹配条件： // 1. 标记 '*' 前面不能是 '{', '[', '?', '}', ']' 中的任何一个 (负向后行断言)。 // 注意：此规则仅排除了部分字符，WhatsApp的实际规则可能更复杂。 // 2. 标记 '*' 后不能是空格 (负向先行断言)。 // 3. 非贪婪地捕获 '*' 和下一个 '*' 之间的所有字符。 formattedText = formattedText.replace(/(?$1'); // 规则2: 斜体 (_text_) // 匹配条件与粗体类似，但针对 '_' 标记。 formattedText = formattedText.replace(/(?$1'); // 规则3: 删除线 (~text~) // 匹配条件与粗体类似，但针对 '~' 标记。 formattedText = formattedText.replace(/(?$1'); return formattedText; } // 示例用法 const sampleText = ` 这些文本应该被格式化:
