本文详细介绍了在javascript中如何将html标签转换为纯文本实体（如将``），以确保它们的功能得以保留。通过深入讲解正则表达式中的负向先行断言（negative lookahead）技术，文章提供了一种精确控制字符串替换行为的解决方案，适用于需要展示html代码但又希望部分标签保持原样的场景。
在Web开发中，有时我们需要将包含HTML标签的字符串作为纯文本显示，而不是让浏览器渲染它们。这在展示代码示例、用户输入净化或特定内容格式化时非常常见。通常，我们会将HTML的起始和结束尖括号（<和>）替换为对应的HTML实体（），以防止浏览器将其解析为实际的HTML元素。然而，一个常见的挑战是，某些特定的HTML标签（例如<br>用于换行）我们希望保留其原始功能，而不是将其也转换为纯文本。
初始替换方法的局限性
最直观的方法是使用字符串的replace()方法配合正则表达式，将所有<和>字符替换掉：
const tagHTML = `<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>`;
// 尝试替换所有 < 字符
const replacedText = tagHTML.replace(/</g, '<');
console.log(replacedText);
// 输出会是：<meltdown-code data-lang="HTML"> ... <br> ...这种方法的问题在于，它会无差别地替换所有<字符，包括我们希望保留的<br>标签中的<。这意味着，经过替换后，<br>将变为
，从而失去其换行功能，显示为纯文本。我们需要的，是一种能够“例外”处理特定标签的替换机制。
解决方案：使用正则表达式的负向先行断言
JavaScript的正则表达式提供了强大的模式匹配能力，其中“负向先行断言”（Negative Lookahead）是解决此问题的关键。负向先行断言(?!...)允许我们匹配一个模式，但前提是该模式后面不跟着特定的子模式。
立即学习“Java免费学习笔记（深入）”；
为了实现“替换除<br>以外的所有HTML标签的尖括号”这一目标，我们可以构建一个正则表达式，它匹配任何以<开头、以>结尾的结构，但排除紧跟着br的<。
正则表达式解析
我们使用的正则表达式是：(?!<br>)<([^>]+)>
让我们逐步分解这个正则表达式：
- (?!<br>): 负向先行断言。这是核心部分。它确保紧随在当前匹配位置之后的内容不是字符串<br>。换句话说，如果它看到<br>，则整个匹配将失败，从而跳过<br>标签。
- <: 匹配字面意义上的开尖括号。
- ([^>]+): 这是一个捕获组。
- [^>]: 匹配除了>之外的任何字符。
- +: 匹配前一个字符（[^>]）一次或多次。
- 这个捕获组的作用是捕获HTML标签的名称和属性部分（例如，<p>中的p，<span id="foo">中的span id="foo"）。在替换字符串中，我们可以使用$1来引用这个捕获到的内容。
- >: 匹配字面意义上的闭尖括号。
结合起来，整个正则表达式会找到所有以<开头、以>结尾的结构，但会跳过<br>标签。
替换字符串解析
替换字符串为：
- <:>
- $1: 引用正则表达式中第一个捕获组（即([^>]+)）所捕获的内容。这样，原始标签的名称和属性会被保留下来。
- >: 用于替换匹配到的闭尖括号>。
完整代码示例
将上述正则表达式和替换字符串应用于原始HTML，可以实现我们所需的效果：
const text = `<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>`;
// 使用负向先行断言进行选择性替换
const output = text.replace(/(?!<br>)<([^>]+)>/g, '<$1>');
console.log(output);输出结果：
<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>从输出可以看出，<meltdown-code>, <span>, <p> 等标签的尖括号都被成功替换成了HTML实体，而<br>标签则保持了原样，能够继续发挥其换行作用。
注意事项与扩展
- 全局匹配标志g: 在replace()方法中使用正则表达式时，务必添加g（global）标志，以确保替换所有匹配项，而不仅仅是第一个。
- 处理多个例外标签: 如果需要保留多个标签（例如<br>和<img>），可以将负向先行断言修改为：(?!<br>|<img>)<([^>]+)>。使用|（或）操作符可以在断言中指定多个排除项。
- 性能考量: 对于非常大的HTML字符串，复杂的正则表达式可能会影响性能。在实际应用中，如果性能是关键因素，可以考虑其他基于DOM解析或更简单字符串操作的方案，但对于大多数场景，正则表达式的效率是足够的。
- HTML解析的复杂性: 请注意，这种基于正则表达式的字符串替换方法适用于相对简单的HTML结构。对于复杂、嵌套或格式不规范的HTML，正则表达式可能无法完全准确地处理所有边缘情况。在这种情况下，使用专门的HTML解析库（如DOMParser或cheerio.js）会是更健壮的选择。
总结
通过巧妙运用JavaScript正则表达式中的负向先行断言，我们能够实现对字符串内容进行高度精细化的控制，例如在替换HTML标签时有选择地保留某些特定标签。这种技术在代码展示、内容清理和自定义格式化等场景中非常实用，提供了一种强大且灵活的解决方案，避免了简单替换可能带来的功能损失。理解并掌握正则表达式的这些高级特性，对于任何JavaScript开发者来说都是一项宝贵的技能。
