如何正确解析含 HTML 实体的 XML 字符串并渲染为 HTML 表格-html教程-PHP中文网

如何正确解析含 HTML 实体的 XML 字符串并渲染为 HTML 表格

本文讲解如何安全解析包含 HTML 实体（如 <、>）的 XML 字符串，提取中的转义 HTML 内容，并动态构建结构化 HTML 表格，避免 DOM 解析错误与 XSS 风险。

本文讲解如何安全解析包含 html 实体（如 ``）的 xml 字符串，提取 `` 中的转义 html 内容，并动态构建结构化 html 表格，避免 dom 解析错误与 xss 风险。

在前端开发中，常需处理嵌套了 HTML 片段的 XML 数据（例如测试用例导出格式），其中标签内容常以 HTML 实体形式编码（如 <DIV><P>Action Field 001</P></DIV>）。直接使用 DOMParser 解析原始 XML 字符串时，若实体未被预处理或上下文不匹配，极易触发解析错误（如 parsererror 或空文档）。关键在于：XML 解析器本身能正确识别实体（前提是文档类型声明合规），但 textContent 返回的是已解码后的纯文本，而我们需要的是可渲染的 HTML 结构——此时应将解码后的内容作为 HTML 插入，而非文本。

以下为推荐实现方案（无需手动编写复杂解码函数）：

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>`;

// ✅ 正确：使用 application/xml 解析 XML（DOMParser 原生支持实体解码）
const doc = new DOMParser().parseFromString(strXML, "application/xml");
if (doc.querySelector("parsererror")) {
  throw new Error("XML parsing failed: " + doc.querySelector("parsererror").textContent);
}

// 提取所有 step 元素
const steps = [...doc.querySelectorAll('step')];

// 创建表格结构
const table = document.createElement("table");
const tbody = document.createElement("tbody");

steps.forEach(step => {
  const row = document.createElement("tr");

  // 第一列：step 类型（type 属性）
  const typeCell = document.createElement("td");
  typeCell.textContent = step.getAttribute("type") || "unknown";

  // 第二列：parameterizedString 的内容（已自动解码为 HTML 字符串）
  const htmlContent = step.querySelector("parameterizedString")?.textContent || "";
  const contentCell = document.createElement("td");
  contentCell.innerHTML = htmlContent; // ⚠️ 注意：仅当内容可信时才用 innerHTML

  row.append(typeCell, contentCell);
  tbody.append(row);
});

table.append(tbody);
document.body.append(table);

配套样式（增强可读性）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

table {
  border-collapse: collapse;
  margin-top: 16px;
}
td {
  border: 1px solid #333;
  padding: 8px 12px;
  vertical-align: top;
}
table div p {
  margin: 0;
  padding: 0;
}

✅ 关键要点说明：

DOMParser 在 "application/xml" 模式下原生支持 HTML 实体解码（如 < →
使用 textContent 获取内容是安全的——它返回已解码的字符串，可直接赋给 innerHTML 渲染。
⚠️ 安全警示： 若 parameterizedString 内容来自不可信源（如用户输入），直接 innerHTML = htmlContent 存在 XSS 风险。生产环境应先进行 HTML 消毒（如使用 DOMPurify）：
```
import DOMPurify from 'dompurify';
contentCell.innerHTML = DOMPurify.sanitize(htmlContent);
```
若需提取多个（如每 step 含多组字段），可遍历 step.querySelectorAll("parameterizedString") 并按需创建多列。

此方案兼顾健壮性、可维护性与安全性，是处理“XML 中嵌套 HTML 实体”场景的标准实践。