本文详细介绍一种基于 DOM 解析的可靠方法，能够将真实的 HTML 元素自动转换为结构清晰、支持语法高亮的代码块。该方法完全规避了正则表达式处理 HTML 的常见缺陷与 XSS 安全风险，可精准高亮标签名、属性、引号及文本内容等语法单元。
在前端开发、技术文档编写或在线教学场景中，我们经常需要将页面中的 HTML 元素结构以代码形式清晰展示出来。传统做法是提取元素的 innerHTML 字符串，再通过正则表达式进行转义和替换。这种方法不仅容易因匹配错误导致格式混乱，还可能因转义不彻底引入跨站脚本（XSS）漏洞。本文将介绍一种更安全、更可靠的替代方案：直接利用浏览器已解析的 DOM 树来生成语法高亮的代码块，从根本上避免字符串处理的风险。
核心实现：一个可直接使用的函数
以下 generateHTMLBlock 函数是方案的核心。它接收一个真实的 DOM 节点作为参数，通过递归遍历其节点树，为元素、文本、注释等不同类型生成对应的、带有特定 CSS 类名的 标签，从而为后续的样式高亮提供结构基础。
function generateHTMLBlock(node) {
const parent = document.getElementById('output'); // 目标输出容器
// 辅助函数：批量创建带 class 和 textContent 的 span 元素
function ce(parent, ...args) {
for (let i = 0; i < args.length; i += 2) {
const e = document.createElement('span');
e.className = args[i];
e.textContent = args[i + 1];
parent.appendChild(e);
}
}
// 递归生成节点表示
function genNode(parent, node) {
const wrapper = document.createElement('div');
parent.appendChild(wrapper);
wrapper.className = 'node';
switch (node.nodeType) {
case Node.ELEMENT_NODE:
wrapper.classList.add('element');
const tagName = node.nodeName.toLowerCase();
// 生成开始标签：
ce(wrapper, 'tagStart', '');
break;
case Node.TEXT_NODE:
wrapper.classList.add('text');
const trimmedText = node.textContent.trim();
if (trimmedText) {
ce(wrapper, 'textValue', trimmedText);
}
break;
case Node.COMMENT_NODE:
wrapper.classList.add('comment');
ce(wrapper, 'commentStart', '');
break;
}
}
genNode(parent, node);
}
使用方法非常简单直观：
为何此方法更安全可靠？
与传统的基于字符串和正则表达式的 HTML 代码高亮方法相比，这种基于 DOM 遍历的方案具备以下显著优势：
- 彻底规避正则表达式风险：完全无需使用
replace()等函数处理 HTML 字符，从根本上避免了标签误匹配、属性值被意外截断或转义错误等问题。 - 内置 XSS 攻击防御：所有内容均通过
textContent属性设置，浏览器会将其视为纯文本而非可执行代码。即使节点属性中包含恶意脚本（如），也会被安全地显示为文本字符。 - 结构语义化，易于扩展：每个语法单元（如标签起止符、标签名、属性名、等号、引号、属性值）都被独立的
包裹并赋予特定类名，使得 CSS 可以极其精细地控制各部分的颜色、字体和间距。 - 完美处理复杂结构：无论是嵌套元素、包含空白字符的文本节点，还是 HTML 注释，该方法都能准确解析并保持其原始结构进行展示。
提升视觉效果：配套 CSS 样式建议
生成结构化的代码后，搭配合适的 CSS 样式才能获得最佳的可读性。以下是一组基础的高亮样式建议，您可以根据项目设计风格进行调整：
#output {
background: #1d1b1b;
color: #aaa;
padding: 1rem;
overflow-x: auto;
}
.node { white-space: pre-wrap; font-family: 'SFMono-Regular', Consolas, monospace; }
.node > .node { margin-left: 2ch; }
.tagStart, .tagEnd { color: #fff; }
.tagName { color: #f09449; } /* 标签名高亮 */
.attrName { color: #88afce; } /* 属性名高亮 */
.attrEqual, .attrQuote { color: #fff; }
.attrValue { color: #bfbd68; } /* 属性值高亮 */
.textValue { color: #fff; } /* 文本内容高亮 */
.comment { color: #999; }
关键注意事项与最佳实践
- 必须传入 DOM 节点对象：此函数处理的是已挂载到文档中的真实 DOM 节点（例如通过
document.querySelector()获取）。切勿直接传入innerHTML字符串。 - 注意特殊符号的区分：如果页面中需要将
<或>作为普通文本内容（而非标签符号）进行高亮，可能需要定义额外的样式类来区分，避免与标签起止符的样式混淆。 - 性能优化建议：对于结构极其庞大或嵌套很深的 DOM 树，递归遍历可能影响性能。在生产环境中，若遇到性能瓶颈，可考虑采用分块渲染、异步处理或虚拟滚动等技术进行优化。
总而言之，这种基于 DOM 遍历生成 HTML 代码高亮块的方法，将代码展示从脆弱的字符串操作升级为健壮的结构化处理。它在安全性、代码可维护性以及最终呈现的专业度方面达到了优秀平衡，是构建高质量前端技术文档、交互式教程或代码演示工具的优选方案。
