本教程详细阐述了在javascript中如何将html标签转换为实体字符（如`<`和`>`），同时巧妙地豁免特定标签（例如`
`）不被转义，以确保它们仍能正常渲染。通过引入正则表达式的负向先行断言技术，我们提供了一种精确控制标签转义行为的专业解决方案，避免了简单全局替换带来的问题。
1. 遇到的问题：HTML标签转义的挑战
在Web开发中，我们经常需要将用户输入或特定HTML内容显示为纯文本，而不是被浏览器渲染。这通常通过将HTML的特殊字符（如<和>）替换为其对应的HTML实体（）来实现。例如，将<p>Hi</p>转换为
Hi
。然而，简单的全局替换方法，如tagHTML.replace(/</g, '')，会带来一个常见的问题：它会无差别地转义所有标签，包括那些我们希望保留其原始功能的标签，例如用于换行的<br>标签。一旦<br>被转义为
，它将不再产生换行效果，而是作为纯文本显示。这在需要展示代码片段或特定格式化内容时尤其 problematic。
2. 解决方案核心：正则表达式负向先行断言
JavaScript的String.prototype.replace()方法虽然强大，但它没有内置的“例外”机制来排除特定匹配。要实现这种选择性转义，我们需要借助正则表达式的高级特性——负向先行断言 (Negative Lookahead)。
负向先行断言的语法是 (?!pattern)，它的作用是：在当前位置尝试匹配 pattern，如果匹配成功，则当前位置的匹配失败；如果匹配失败，则当前位置的匹配成功。简单来说，它确保某个模式不出现在匹配位置的后面。这使得我们能够在匹配某个字符时，同时检查其后续字符是否符合特定模式，从而实现精确的条件匹配。
立即学习“Java免费学习笔记（深入）”；
3. 构建精确的正则表达式
为了实现“转义所有非<br>标签的尖括号”，我们可以构建如下正则表达式：
/(?!<br>)<([^>]+)>/g
让我们逐步解析这个正则表达式的各个部分：
- g：全局标志（Global Flag），确保替换所有匹配项，而不仅仅是第一个。
- (?!<br>)：这是负向先行断言。它要求当前匹配的<字符后面不能紧跟着br>。如果后面是br>，则这个<不会被匹配。这是实现“豁免”功能的关键。
- <：匹配一个字面量的小于号。这个<是我们要转义的目标，但它必须通过了前面的负向先行断言的检查。
- ([^>]+)：这是一个捕获组。
- [^>]：匹配任何不是大于号的字符。
- +：匹配前一个字符或组一次或多次。
- 这个捕获组的作用是捕获标签名及其内部的所有属性（例如，p、div class="foo"等）。我们将在替换字符串中用到它。
- >：匹配一个字面量的大于号。
4. 实现选择性转义的示例代码
结合上述正则表达式和replace()方法，我们可以编写如下代码来实现选择性转义：
const text = `<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>`;
// 使用负向先行断言，将所有非<br>标签的尖括号转换为实体
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>在这个替换操作中：
- $1：引用了第一个捕获组的内容，即原始标签名和属性（例如，p、span等），确保它们被保留。
- >：替换了匹配到的闭标签>。
通过这种方式，<span>会被替换为，<p>会被替换为 ，而<br>则因为不满足负向先行断言的条件（它的<后面跟着br>)，所以不会被匹配和替换，从而保留了其原始的换行功能。 通过巧妙地运用JavaScript正则表达式中的负向先行断言，我们能够实现对HTML标签的精确控制，在将大部分标签转换为实体字符以确保安全显示的同时，保留特定标签的原始功能。这种方法提供了一个强大且灵活的解决方案，适用于需要选择性处理HTML内容的场景。理解并掌握负向先行断言，将极大地扩展您在字符串处理方面的能力。5. 进一步考虑与注意事项
总结
