17370845950

应使用 DOMParser 解析 XML 字符串为 XML Document 后用 querySelector 等提取；innerHTML 和正则易因 HTML 解析规则、命名空间、CDATA 等导致不可靠结果。

XML 不是 HTML，别用 innerHTML 或正则硬刚结构

HTML5 环境下直接对 XML 字符串用正则提取标签内容，本质是拿非结构化工具处理半结构化数据。浏览器原生不解析 XML 字符串为 DOM，innerHTML 会按 HTML 规则解析（比如自闭合标签被补全、命名空间丢失、 变成 ），结果不可靠。

真正安全的做法是用 DOMParser 解析 XML 字符串为 XML Document，再用 querySelector 或 getElementsByTagName 提取。正则只适合极简、已知格式、无嵌套、无命名空间的临时场景。

如果非要用正则，必须避开这三类坑

• XML 允许换行、缩进、注释、CDATA、处理指令（如 ），正则很难全覆盖；
• 标签可能带属性、命名空间前缀（如 ）、大小写混用（XML 区分大小写）；
• 内容本身含 或 >（如嵌套 CDATA 或转义字符 zuojiankuohaophpcn），会导致正则提前截断或误匹配。

例如想提取 文本，写成 / 在多数简单 XML 中看似能用，但一旦遇到：

就会因未处理实体而漏掉内容；若 XML 含 ，该正则直接失效。

立即学习“前端免费学习笔记（深入）”；

DOMParser 解析 XML 的最小可靠写法

这是 HTML5 中最接近“开箱即用”的方案，兼容所有现代浏览器，且自动处理命名空间、CDATA、实体等。

关键点：

• 必须指定 "application/xml" 或 "text/xml" 类型，否则解析失败；
• 解析失败时 parseFromString 返回空文档，需检查 documentElement.nodeName === "parsererror"；
• 用 textContent 而非 innerHTML 获取文本，避免二次 HTML 解析污染。

const xmlStr = ``;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "application/xml");

if (xmlDoc.documentElement.nodeName === "parsererror") {
  console.error("XML parse error:", xmlDoc.documentElement.textContent);
} else {
  const titleEl = xmlDoc.querySelector("title");
  const text = titleEl ? titleEl.textContent : null; // → "Hello & World"
}

命名空间和多级嵌套时的 querySelector 写法

XML 常含命名空间（如 xmlns:dc="http://purl.org/dc/elements/1.1/"），此时不能直接写 dc\\:title —— 浏览器不支持命名空间前缀的 CSS 选择器（除非用 getElementsByTagNameNS）。

稳妥做法：

• 忽略命名空间：用通配符 *|title（部分浏览器支持，但非标准）；
• 明确指定命名空间 URI：用 getElementsByTagNameNS("http://purl.org/dc/elements/1.1/", "title")；
• 若只需取第一个匹配项，可遍历 getElementsByTagName("title") 并检查 namespaceURI 属性。

例如提取 RSS 中的 ：

const creators = xmlDoc.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/", "creator");
const firstCreator = creators.length ? creators[0].textContent : null;

注意：命名空间 URI 必须一字不差，包括末尾斜杠，否则匹配失败。

XML 解析的边界往往不在语法，而在你是否意识到那个看似普通的 标签其实裹着 xmlns="" 或藏在 里。正则能省事，但省下的时间常被调试命名空间和实体转义吃掉。