本文讲解如何正确解析包含 HTML 实体（如 <、>）的 XML 字符串，提取 中的内容，并将其安全、结构化地渲染为 HTML 表格，避免 DOM 解析错误与 XSS 风险。
本文讲解如何正确解析包含 html 实体（如 ``）的 xml 字符串，提取 `
在前端处理测试用例、自动化报告等场景中，常会遇到以 XML 格式嵌套 HTML 内容的字符串——例如
关键在于：XML 解析器不会自动解码 HTML 实体，它只按 XML 规则处理字符引用（如 &）；而 等在 XML 中本就是非法字符（除非转义），因此原始字符串本身已是合法 XML，无需额外“修复”编码——只需正确提取并选择性解码/渲染。
✅ 正确做法是：
- 使用 DOMParser 安全解析 XML（前提是字符串格式合法，如示例中已对 做了 </> 转义）；
- 遍历目标节点（如所有
），通过 .querySelector('parameterizedString') 获取元素； - 调用 .textContent 获取原始转义字符串（如 "<DIV><P>Action Field 001</P></DIV>"）；
- 将该字符串作为 HTML 片段注入到 innerHTML 中（仅限受信内容），或更安全地——先解码再渲染。
以下为推荐实现（兼顾可读性、健壮性与安全性）：
const strXML = `<steps id="0" last="4"><step id="1" type="ValidateStep"><parameterizedstring isformatted="true"><DIV><P>Action Field 001</P></DIV></parameterizedstring><parameterizedstring isformatted="true"><DIV><P>Expected Result Field 001</P></DIV></parameterizedstring><description></description></step><step id="2" type="RunStep"><parameterizedstring isformatted="true"><DIV><P>Action Field 002</P></DIV></parameterizedstring><parameterizedstring isformatted="true"><DIV><P>Expected Result Field 002</P></DIV></parameterizedstring><description></description></step></steps>`;
// 1. 解析 XML（注意 MIME 类型必须为 "application/xml"）
const doc = new DOMParser().parseFromString(strXML, "application/xml");
if (doc.querySelector("parsererror")) {
throw new Error("Invalid XML: " + doc.querySelector("parsererror").textContent);
}
// 2. 提取所有 step 元素
const steps = [...doc.querySelectorAll('step')];
// 3. 构建表格
const table = document.createElement('table');
const tbody = document.createElement('tbody');
steps.forEach(step => {
const row = document.createElement('tr');
// 第一列：step 类型（安全，纯文本）
const typeCell = document.createElement('td');
typeCell.textContent = step.getAttribute('type') || 'unknown';
// 第二列：parameterizedString 内容（含 HTML，需谨慎渲染）
const htmlCell = document.createElement('td');
const paramString = step.querySelector('parameterizedString');
if (paramString) {
// ✅ 安全前提：确认内容来源可信（如内部系统生成）
// 否则应先使用 DOMPurify 等库净化，或改用 textContent + 手动标签重建
htmlCell.innerHTML = paramString.textContent;
} else {
htmlCell.textContent = '(no content)';
}
row.append(typeCell, htmlCell);
tbody.append(row);
});
table.append(tbody);
document.body.append(table);
配套样式（提升可读性）：
table {
border-collapse: collapse;
margin-top: 1rem;
}
td {
border: 1px solid #999;
padding: 8px 12px;
vertical-align: top;
}
table div p {
margin: 0;
padding: 0;
}
⚠️ 重要注意事项：
-
永远不要对不可信的 textContent 直接赋值给 innerHTML —— 若 XML 数据来自用户输入或第三方 API，必须先使用 DOMPurify 进行 HTML 净化，例如：
htmlCell.innerHTML = DOMPurify.sanitize(paramString.textContent); - decodeEntities() 自定义函数在本例中非必需：因为 textContent 已返回原始实体字符串，而浏览器在 innerHTML 渲染时会自动解析标准 HTML 实体（< →
- 若需兼容旧环境或做预处理，可使用内置 textarea 解码法（更可靠）：
function decodeHTML(htmlStr) { const temp = document.createElement('textarea'); temp.innerHTML = htmlStr; return temp.value; }
总结：处理含 HTML 实体的 XML，核心是分清「XML 解析」与「HTML 渲染」两个阶段——前者保证结构正确，后者决定展示方式。合理利用 textContent 获取转义内容，结合 innerHTML（配合净化）安全还原语义，即可高效构建动态表格，同时保持代码简洁与工程健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
