上一篇
如何不解析html标签
文本提取工具或正则表达式匹配非标签内容，忽略“之间的部分即可实现不解析HTML
是一些可以让 HTML 标签不被解析的方法及其详细介绍：
| 方法 | 具体操作 | 原理/特点 | 适用场景 | 注意事项 |
|---|---|---|---|---|
| 使用 HTML 实体 | 将特殊字符如 <、>、& 等替换为对应的实体形式，< 写成 <，> 写成 >，比如原本的 <div>Example Text</div> 转换为 <div>Example Text</div> |
浏览器遇到实体字符时会将其视为普通文本而非 HTML 标签进行解析，因为这些实体是预定义的特殊字符表示，不会触发标签解析逻辑 | 适用于需要在页面上展示 HTML 代码片段的情况，如技术文档、教程示例等，可直观呈现代码结构且保持格式稳定 | 大量使用时会使代码可读性变差，手动替换较麻烦；对于复杂或大量的 HTML 代码，维护成本较高 |
使用 <pre> |
把不想被解析的 HTML 代码放在 <pre> 标签内，如 <pre><div>Example Text</div></pre> |
该标签用于表示预格式化文本，浏览器会保留其中的空格、换行符等原始格式，并且不会解析内部的 HTML 标签，原样显示内容 | 适合展示多行代码或需要保留特定格式的文本内容，常用于程序代码展示、日志输出等场景 | 仅适用于静态内容，若内容是动态生成的，可能需要结合其他方法；默认字体样式可能不符合审美需求，通常需配合 CSS 进一步设置样式 |
使用 <code> |
将 HTML 代码置于 <code> 标签中，像 <code><div>Example Text</div></code> |
此标签主要用于标识计算机代码，浏览器会以等宽字体显示其中的内容，同时不会解析里面的 HTML 标签，突出代码部分与其他文本的区别 | 与 <pre> 类似，多用于单个代码行的展示或强调短小的代码片段，在文档中区分普通文本和代码逻辑时较为方便 |
同样不适用于动态内容；样式相对固定，个性化定制空间较小，若对展示效果有较高要求，还需额外添加样式控制 |
使用 <script type="text/html"> 或 <script type="text/template"> |
把 HTML 代码放入这类脚本标签内，并添加 display: block 样式以确保正常显示，<script type="text/html" style="display: block">...</script> |
浏览器通常将脚本标签内的内容当作脚本执行，但指定了特定的 MIME 类型（如 text/html）后，会将其视为纯文本处理，从而避免解析其中的 HTML 标签 | 可用于嵌入模板或复杂的 HTML 结构，在一些框架或库中作为组件化的模板存储方式有一定优势 | 可能会影响页面的语义化结构，毕竟本质上还是脚本标签；在某些旧版浏览器中可能存在兼容性问题 |
| 使用 CDATA（仅限特定情况） | 虽然 HTML 本身不支持 CDATA，但在部分情况下，如在 <script> 标签中使用 CDATA 包裹不希望被解析的内容，语法为 <![CDATA[...]]> |
CDATA 原本是 XML 中的特性，在 HTML 的某些特定元素（如脚本）里借用来实现类似功能，告诉解析器其中的内容无需解析，直接当作原始数据处理 | 主要应用于 JavaScript 代码块中包含大量类似 HTML 的结构但又不想被解析的情况，例如一些动态生成标记语言的场景 | HTML 标准不支持，只是在特定元素内有有限的效果；过度依赖可能导致代码在不同浏览器间的一致性难以保证 |
| 使用注释 | 将 HTML 代码放在注释标记 <!---> 之间，如 <!-<div>Example Text</div> --> |
会被浏览器完全忽略，不会进行任何解析和渲染操作 | 适用于临时禁用某些代码段进行调试，或者存放备用代码、备注信息等，不影响页面的正常显示和功能 | 仅适用于静态内容，无法用于展示给用户看的动态内容；如果误删除了注释符号，可能导致代码意外生效引发错误 |
| 使用 JavaScript 字符串 | 通过 JavaScript 创建一个字符串变量存储 HTML 代码，然后将该字符串插入到页面的某个元素中，var htmlCode = '<div>Example Text</div>'; document.getElementById('container').innerText = htmlCode; |
JavaScript 字符串中的内容包括 HTML 标签都会被当作普通文本处理，因为是在脚本上下文中，而不是 HTML 解析上下文 | 可实现动态加载和更新未解析的 HTML 内容，根据用户交互或其他条件灵活控制内容的显示 | 增加了 JavaScript 代码的复杂性，需要编写额外的脚本逻辑；对搜索引擎优化不太友好，因为搜索引擎可能无法正确索引 JavaScript 生成的内容 |
| 使用模板引擎的转义功能 | 许多现代模板引擎（如 Jinja2、Handlebars、EJS 等）都提供了转义功能，自动将变量中的 HTML 特殊字符进行转义处理，防止其被解析为标签 | 模板引擎在渲染页面时会对插入的数据进行检查和转义，确保安全性和正确的显示效果 | 在后端渲染页面时广泛使用，特别是涉及用户输入数据的展示，能有效防止 XSS 攻击等安全问题 | 不同模板引擎的语法和使用方式有所差异，需要学习和掌握相应模板引擎的规则；配置不当可能导致转义过度或不足的问题 |
相关问答FAQs
- 问：在使用
<pre>标签展示 HTML 代码时，如何让代码更具可读性？
答：可以通过 CSS 来设置<pre>标签的样式，比如设置合适的字体颜色、背景色、行高等，还可以结合高亮插件（如 Prism.js、Highlight.js），这些插件能够根据不同的语法对代码进行彩色标注，大大提高代码的可读性，使用时只需引入相应的插件脚本和样式表，并按照说明对<pre>标签进行适当配置即可。 - 问：使用 HTML 实体显示 HTML 代码时，有没有工具可以自动完成实体转换？
答：有一些在线工具和文本编辑器插件可以实现自动将普通 HTML 代码转换为 HTML 实体形式，Sublime Text、VS Code 等编辑器都有相关的插件，在输入 HTML 标签时会自动替换为对应的实体字符，也有一些专门的在线转换网站，只需将待转换的代码粘贴进去，就能快速得到转换后的结果,节省手动替换的时间和精力。
在实际开发中，可根据具体需求选择合适的方法来避免 HTML 标签被解析，以达到预期的显示效果，要注意不同方法的兼容性和优缺点，确保在各种环境下都能稳定运行
