时间戳

首页 > 解决方案 > 如何在 Node.js 中解析和修改 XHTML（支持 HTML 实体和 CDATA 部分）？

javascript - 如何在 Node.js 中解析和修改 XHTML（支持 HTML 实体和 CDATA 部分）？

问题描述

我正在开发一个接收 XHTML 片段（Confluence 存储格式）的 Node.js 应用程序，应该对其进行一些修改，然后发回修改后的 XHTML。XHTML 可能包含 HTML 实体（例如&ouml;）以及 CDATA 部分（例如<![CDATA[test]]>）。

我遇到的挑战是，使用我尝试过的解析器，当我在 HTML 模式下解析片段时，CDATA 部分会中断，但是当我在 XML 模式下解析它时，HTML 实体没有被正确解释。

下面是一个示例，我如何让它在浏览器中工作，但我如何使用 jsdom 和 Cheerio 无法让它工作。是否有任何其他库可以用来实现这一点，或者有任何不同的方式来使用 jsdom 或 Cheerio？

在浏览器中

在浏览器中，我可以使用DOMParserXML 模式。使用测试片段<span>&ouml;<![CDATA[ä]]></span>，我可以将它包装在一个 XHTML 正文中：

const doc = new DOMParser().parseFromString(`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><span>&ouml;<![CDATA[ä]]></span></body></html>`, 'application/xml');
doc.querySelector('body').innerHTML;   // <span>ö<![CDATA[ä]]></span>
doc.querySelector('body').textContent; // öä

XML MIME 类型确保正确解释 CDATA 部分，而 XHTML DOCTYPE 确保支持实体。

jsdom

为了在 Node.js 中实现同样的效果，我尝试使用jsdom。问题是当我在 HTML 模式下解析代码时，CDATA 部分被转换为注释，但是当我在 XML 模式下解析它时，由于 HTML 实体而引发异常：

import { JSDOM } from 'jsdom';
const xhtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><span>&ouml;<![CDATA[ä]]></span></body></html>`;

new JSDOM(xhtml).window.document.body.innerHTML; // <span>ö<!--[CDATA[ä]]--></span>
new JSDOM(xhtml).window.document.body.textContent; // ö
new JSDOM(xhtml, { contentType: 'application/xml' }); // Uncaught DOMException [SyntaxError]: about:blank:1:186: undefined entity.

更新：我已将问题报告给 jsdom。

切里奥

我首选的在后端进行 DOM 修改的方法是cheerio。在 HTML 模式下使用cheerio，CDATA 部分被转换为注释。在 XML 模式中，实体不会被解释，而是被双重转义为&amp;ouml;. 在不解码实体的 XML 模式下，XHTML 被正确保留，但实体没有被正确解释，在获取文本内容时可以看到。

import cheerio from 'cheerio';
const xhtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><span>&ouml;<![CDATA[ä]]></span></body></html>`;

cheerio.load(xhtml).root().find('body').html(); // <span>ö<!--[CDATA[ä]]--></span>
cheerio.load(xhtml).root().find('body').text(); // ö
cheerio.load(xhtml, { xmlMode: true }).root().find('body').html(); // <span>&amp;ouml;<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true }).root().find('body').html(); // &ouml;ä
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').html(); // <span>&ouml;<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').text(); // &ouml;ä

更新：我已将问题报告给cheerio。

标签： javascriptnode.jsdomxhtml

解决方案

在cheerio 中，有人向我指出了解决该问题的方法：

cheerio.load(xhtml, { xml: { xmlMode: false, recognizeCDATA: true, recognizeSelfClosing: true } });

使用这些选项，我可以在 Node.js 环境中成功解析 XHTML。

除了这个解决方案，我注意到DOMParser在浏览器中使用的缺点是浏览器之间存在不一致。特别是，在将查询选择器与 XML 命名空间结合使用时，我有时必须在查询中包含命名空间，有时则不需要。由于这些不一致，jquery 也正式不支持 XML 命名空间。为了在浏览器之间以及前端、前端测试和后端之间实现一致的行为，我决定使用cheerio，甚至在浏览器中解析XHTML。

推荐阅读