解析含HTML实体的XML字符串提取参数化内容至HTML表报错求助

问题根源 #

你的XML字符串处于双重HTML实体转义状态：外层的<是XML标签的转义，标签内部的<是对HTML标签的二次转义。直接用DOMParser解析未完全解码的字符串会导致XML结构解析错误；自定义的decodeEntities函数只覆盖了部分实体，无法完成完整解码。

解决方案步骤 #

1. 完整解码原始字符串：利用DOM元素的原生解码能力（比正则更可靠），先还原外层转义的XML标签。
2. 解析XML并提取内容：用DOMParser处理解码后的正确XML，提取所有parameterizedString标签的文本。
3. 解码内部HTML实体：对每个提取到的内容再次解码，还原成原始HTML片段。
4. 生成HTML表格：将Action和Expected Result配对，构建表格结构。

完整代码实现 #

// 原始双重转义XML字符串
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/></step></steps>';

// 通用实体解码函数（利用DOM原生能力，覆盖所有实体）
function decodeFullEntities(str) {
  const tempEl = document.createElement('div');
  tempEl.innerHTML = str;
  return tempEl.textContent;
}

// 第一步：解码外层XML转义，得到可解析的XML
const decodedXML = decodeFullEntities(strXML);

// 第二步：解析XML
const doc = new DOMParser().parseFromString(decodedXML, "application/xml");

// 第三步：提取所有parameterizedString标签内容并解码内部HTML
const paramStrings = Array.from(doc.querySelectorAll('parameterizedString')).map(el => {
  return decodeFullEntities(el.textContent);
});

// 第四步：生成HTML表格
if (paramStrings.length >= 2) {
  const table = `
    <table border="1">
      <thead>
        <tr>
          <th>Action</th>
          <th>Expected Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>${paramStrings[0]}</td>
          <td>${paramStrings[1]}</td>
        </tr>
      </tbody>
    </table>
  `;
  console.log(table);
  // 若要插入页面，可使用 document.body.innerHTML += table;
}

代码说明 #

• decodeFullEntities函数：借助浏览器DOM的innerHTML和textContent自动处理所有HTML实体，比正则表达式更全面，避免遗漏实体类型。
• 先解码外层XML字符串，确保DOMParser能识别正确的XML标签结构。
• 提取内容后再次解码，还原内部的HTML片段（比如<DIV>最终变成<DIV>）。
• 最后将Action和Expected Result配对生成表格，可直接插入页面使用。

内容的提问来源于stack exchange，提问作者Ragul