本教程详细阐述如何利用javascript正则表达式，将遵循whatsapp风格的特殊符号（如`*`、`_`、`~`）标记的文本转换为对应的html标签（``、``、``）。文章深入探讨了如何通过负向先行断言和负向后行断言处理复杂的格式化条件，包括前置字符限制和内容起始空格限制，并提供实用的代码示例及潜在局限性分析。
在现代即时通讯应用中，用户通常通过简单的符号（如星号、下划线、波浪线）来对文本进行加粗、斜体或删除线等格式化操作。这些应用在解析这些符号时，往往会遵循一套特定的规则，例如限制前置字符、禁止内容以空格开头，甚至对符号的重复使用有严格要求。本教程旨在介绍如何使用JavaScript和正则表达式来模拟这种“类WhatsApp”的文本格式化规则，并将其转换为标准的HTML标签。
在实现转换之前，我们需要明确这些规则的特点：
基本语法：
前置字符限制： 某些字符紧跟在格式化符号之前时，可能会阻止格式化生效。例如，在WhatsApp中，,*文本* 可以格式化为 ,<b>文本</b>，但 @*文本* 则不会被格式化。这意味着我们需要识别并排除某些特定的前置字符。
内容起始空格限制： 格式化符号后紧跟空格的文本通常不会被格式化。例如，* 文本* 不会被加粗。
符号重复限制： 连续使用多个相同的格式化符号可能会导致不同的行为：
核心思路是利用正则表达式捕获符合特定模式的文本，然后使用替换功能将其包裹在相应的HTML标签中。为了处理上述复杂规则，我们将引入“先行断言”（Lookahead Assertion）和“后行断言”（Lookbehind Assertion）。
立即学习“前端免费学习笔记（深入）”；
一个基本的正则表达式可能如下所示：
text
.replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g, '<b>$1</b>')
.replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g, '<i>$1</i>')
.replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g, '<s>$1</s>');这段代码通过 (?!\s) 确保格式化符号后不紧跟空格，并使用 ((?:(?!\*|\n).)+) 捕获内容，直到遇到下一个符号或换行符。然而，它并未解决前置字符限制和复杂的符号重复限制。
为了处理前置字符限制，我们可以使用负向后行断言（Negative Lookbehind Assertion），即 (?<!pattern)。它确保在当前匹配位置之前，不能出现特定的 pattern。
以下是针对加粗、斜体和删除线的增强型正则表达式：
// 加粗：匹配 *文本*，但前面不能是 {、[、?、}、] 且 * 后不能是空格
string = string.replace(/(?<![{[?}\]])\*(?!\s)(.+?)\*/g, '<b>$1</b>');
// 斜体：匹配 _文本_，但前面不能是 {、[、?、}、] 且 _ 后不能是空格
string = string.replace(/(?<![{[?}\]])_(?!\s)(.+?)_/g, '<i>$1</i>');
// 删除线：匹配 ~文本~，但前面不能是 {、[、?、}、] 且 ~ 后不能是空格
string = string.replace(/(?<![{[?}\]])~(?!\s)(.+?)~/g, '<s>$1</s>');正则表达式解析：
function formatWhatsAppTextToHtml(text) {
let formattedText = text;
// 1. 处理加粗
// 匹配 *文本*，但前面不能是 {、[、?、}、] 且 * 后不能是空格
// 注意：此规则会处理 `**bold**` 为 `<b>*bold*</b>`
formattedText = formattedText.replace(/(?<![{[?}\]])\*(?!\s)(.+?)\*/g, '<b>$1</b>');
// 2. 处理斜体
// 匹配 _文本_，但前面不能是 {、[、?、}、] 且 _ 后不能是空格
formattedText = formattedText.replace(/(?<![{[?}\]])_(?!\s)(.+?)_/g, '<i>$1</i>');
// 3. 处理删除线
// 匹配 ~文本~，但前面不能是 {、[、?、}、] 且 ~ 后不能是空格
formattedText = formattedText.replace(/(?<![{[?}\]])~(?!\s)(.+?)~/g, '<s>$1</s>');
return formattedText;
}
// 示例测试
const inputString = `
这些应该成功格式化:
*this text is bold*,
_this text is italic_,
~this text is strikethrough~.
~_*this text is bold, italic and strike-through*_~
,*this text is bold* (逗号前置)
这些应该不被格式化 (或部分格式化):
_ example_ (内容以空格开头)
{*example*} (前置字符 { )
@*example* (前置字符 @ - 注意：当前lookbehind未涵盖此情况)
**this text is bold** (多余的星号)
***this text is not bold** (多余的星号，应完全不格式化 - 注意：当前regex未完全实现此严格规则)
`;
console.log("--- 原始文本 ---");
console.log(inputString);
console.log("\n--- 格式化结果 ---");
console.log(formatWhatsAppTextToHtml(inputString));
/* 预期输出示例 (基于当前正则表达式):
--- 原始文本 ---
... (同inputString)
--- 格式化结果 ---
这些应该成功格式化:
<b>this text is bold</b>,
<i>this text is italic</i>,
<s>this text is strikethrough</s>.
<s><i><b>this text is bold, italic and strike-through</b></i></s>
,<b>this text is bold</b> (逗号前置)
这些应该不被格式化 (或部分格式化):
_ example_ (内容以空格开头)
{*example*} (前置字符 { )
@*example* (前置字符 @ - 注意：当前lookbehind未涵盖此情况)
<b>*this text is bold*</b> (多余的星号)
<b>**this text is not bold</b> (多余的星号，应完全不格式化 - 注意：当前regex未完全实现此严格规则)
*/尽管上述正则表达式解决了许多复杂场景，但仍存在一些局限性，特别是在严格模拟所有WhatsApp规则时：
不完整的前置字符列表： 当前 (?<![{[?}\]]) 只排除了 {、[、?、}、]。如果WhatsApp有更多不允许的前置字符（例如 !、@ 等），需要将它们添加到负向后行断言中。例如，要排除 @，可以将正则表达式修改为 (?<![{[?}\]]|@)\*(?!\s)(.+?)\*。
符号重复限制的复杂性：
嵌套格式化： 对于 *bold _italic_* 这样的嵌套结构，简单的顺序替换可能会产生预期之外的结果。例如，先处理加粗，内部的 _italic_ 可能仍然保留，或者如果先处理斜体，外部的 *bold ...* 可能无法正确匹配。通常，处理嵌套结构需要更复杂的解析器或递归处理。
性能考量： 对于非常大的文本块，连续应用多个正则表达式替换可能会影响性能。
通过巧妙运用正则表达式的先行断言和后行断言，我们可以有效地将带有特定规则的符号化文本转换为HTML格式。这在构建文本编辑器、聊天应用解析器或内容管理系统时非常有用。然而，对于高度复杂的、包含多层嵌套或严格上下文依赖的格式化规则，可能需要超越简单的正则表达式，考虑构建一个更健壮的词法分析器或解析器来确保准确性和灵活性。在实际应用中，应根据具体需求和规则的复杂程度选择最合适的实现方案。
以上就是使用正则表达式实现类WhatsApp文本格式化与HTML转换教程的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
111
收藏
