精通正则表达式：实现WhatsApp风格的富文本格式转换

本教程探讨如何利用正则表达式在JavaScript中实现类似WhatsApp的文本格式化，将特定符号（如*、_、~）转换为HTML标签（<b>、<i>、<s>）。文章将详细介绍正则表达式的关键技术，包括负向先行断言和负向后行断言，以处理复杂规则如符号前后的字符限制和嵌套样式。同时，也将讨论现有方法的局限性，并提供代码示例以帮助开发者在实际项目中应用和优化。

在现代消息应用和富文本编辑器中，用户通常可以通过简单的标记（如星号、下划线、波浪线）来快速格式化文本，使其呈现为粗体、斜体或删除线。WhatsApp等应用更是将这些规则细化，引入了对前导字符、后导空格和标记数量的严格限制，使得实现完全兼容的格式化变得复杂。本教程旨在通过JavaScript和正则表达式，深入探讨如何处理这些复杂的文本格式化需求。

理解WhatsApp风格的格式化规则

要精确地模仿WhatsApp的文本格式化行为，我们需要理解其核心规则：

1. 基本样式转换：

   • *文本* 转换为 <b>文本</b> (粗体)
   • _文本_ 转换为 <i>文本</i> (斜体)
   • ~文本~ 转换为 <s>文本</s> (删除线)
   • 支持嵌套，例如 ~_*文本*_~ 转换为 <s><i><b>文本</b></i></s>

2. 前导字符限制：

   • 某些字符（如逗号,、冒号:、分号;、空格、下划线_、波浪线~、点.、换行符\n）可以出现在格式化标记之前，且不阻止格式化。例如 ,*文本* 应该变为 ,<b>文本</b>。
   • 其他字符（如@）会阻止格式化。例如 @*文本* 应该保持不变。

3. 后导空格限制：

   

   AssemblyAI

   转录和理解语音的AI模型

   65

   查看详情
   • 格式化标记后面不能紧跟空格。例如 *_文本* 不应被格式化。

4. 标记数量限制：

   • 使用单个标记进行格式化。例如 **文本** 应该被解释为 <b>*文本*</b>，即只将最外层的 * 转换为 <b> 标签，内部的 * 保持不变。
   • 如果标记数量过多（例如，三个或更多），则不应进行格式化。例如 ***文本** 应该保持不变。

基础正则表达式方法及其局限性

最初，我们可能会尝试使用简单的正则表达式进行替换：

// 基础替换方法示例
let text = "*this text is bold*, _this text is italic_, ~this text is strikethrough~.";

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

console.log(text);
// 输出: <b>this text is bold</b>, <i>this text is italic</i>, <s>this text is strikethrough</s>.

这种方法能够处理最基本的格式化，并且通过 (?!\s) 确保标记后不是空格。然而，它无法处理更复杂的WhatsApp规则，例如：

• @*this text is not bold* 仍然会被格式化，因为它没有检查 @ 这个前导字符。
• ***this text is not bold** 也会被格式化，因为它只匹配单个 * 标记，无法识别三个 * 的情况。
• {*example*} 可能会被错误地格式化，因为它没有考虑 { 等特殊字符。

引入高级正则表达式技术

为了更精确地模拟WhatsApp的规则，我们需要利用正则表达式中的高级特性，特别是负向后行断言 (Negative Lookbehind) 和负向先行断言 (Negative Lookahead)。

• 负向先行断言 (?!...)：确保匹配的模式后面不跟着特定的子模式。
• 负向后行断言 (?<!...)：确保匹配的模式前面不跟着特定的子模式。

结合这些技术，我们可以构建更强大的正则表达式来处理上述复杂情况。以下是基于提供的解决方案，并进行详细解释和扩展的代码示例：

/**
 * 格式化类似WhatsApp风格的文本。
 * 该函数将特定的标记（*、_、~）转换为相应的HTML标签（<b>、<i>、<s>），
 * 并尝试遵循WhatsApp的一些格式化规则，例如避免在特定字符后或标记后跟空格时进行格式化。
 *
 * @param {string} text 待格式化的原始文本。
 * @returns {string} 格式化后的HTML字符串。
 */
function formatWhatsAppLikeText(text) {
    let formattedText = text;

    // 规则1: 粗体 (*text*)
    // 匹配条件：
    //   1. 标记 '*' 前面不能是 '{', '[', '?', '}', ']' 中的任何一个 (负向后行断言)。
    //      注意：此规则仅排除了部分字符，WhatsApp的实际规则可能更复杂。
    //   2. 标记 '*' 后不能是空格 (负向先行断言)。
    //   3. 非贪婪地捕获 '*' 和下一个 '*' 之间的所有字符。
    formattedText = formattedText.replace(/(?<![{[?}\]])\*(?!\s)(.+?)\*/g, '<b>$1</b>');

    // 规则2: 斜体 (_text_)
    // 匹配条件与粗体类似，但针对 '_' 标记。
    formattedText = formattedText.replace(/(?<![{[?}\]])_(?!\s)(.+?)_/g, '<i>$1</i>');

    // 规则3: 删除线 (~text~)
    // 匹配条件与粗体类似，但针对 '~' 标记。
    formattedText = formattedText.replace(/(?<![{[?}\]])~(?!\s)(.+?)~/g, '<s>$1</s>');

    return formattedText;
}

// 示例用法
const sampleText = `
这些文本应该被格式化:

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