如何解析和修改Node.js中的XHTML（支持HTML实体和CDATA部分）？
How to parse and modify XHTML in Node.js (supporting HTML entities and CDATA sections)?
我正在开发一个接收 XHTML 片段（Confluence 存储格式）的 Node.js 应用程序，应该对其进行一些修改，然后将修改后的 XHTML 发回。 XHTML 可能包含 HTML 实体（例如 ö）以及 CDATA 部分（例如 <![CDATA[test]]>）。
我 运行 遇到的挑战是，使用我尝试过的解析器，当我在 HTML 模式下解析代码段时，CDATA 部分会中断，但是当我解析它时在 XML 模式下，HTML 实体没有被正确解释。
下面是一个例子，我如何让它在浏览器中工作，但我如何使用 jsdom 和 cheerio 让它工作失败。我可以使用任何其他库来实现此目的，或者使用 jsdom 或 cheerio 的任何不同方式吗？
在浏览器中
在浏览器中，我可以在 XML 模式下使用 DOMParser。使用测试片段 <span>ö<![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>ö<![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>ö<![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.
更新： 我有 reported jsdom 的问题。
欢呼声
我在后端进行 DOM 修改的首选方法是 cheerio。在 HTML 模式下使用 cheerio，CDATA 部分将转换为注释。在 XML 模式下，实体不被解释而是双重转义为 &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>ö<![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>&ouml;<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true }).root().find('body').html(); // öä
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').html(); // <span>ö<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').text(); // öä
更新： 我有 reported 问题给 cheerio。
我是 pointed out cheerio 中问题的解决方法：
cheerio.load(xhtml, { xml: { xmlMode: false, recognizeCDATA: true, recognizeSelfClosing: true } });
使用这些选项，我可以在 Node.js 环境中成功解析 XHTML。
除了这个解决方案，我注意到在浏览器中使用 DOMParser 的缺点是浏览器之间存在不一致。特别是，当结合使用查询选择器和 XML 命名空间时，我有时不得不在查询中包含命名空间，有时则不需要。由于这些不一致，jquery 也 officially doesn't support XML namespaces。为了在浏览器之间以及前端、前端测试和后端之间实现一致的行为，我决定使用 cheerio 甚至在浏览器中解析 XHTML。
我正在开发一个接收 XHTML 片段（Confluence 存储格式）的 Node.js 应用程序，应该对其进行一些修改，然后将修改后的 XHTML 发回。 XHTML 可能包含 HTML 实体（例如 ö）以及 CDATA 部分（例如 <![CDATA[test]]>）。
我 运行 遇到的挑战是，使用我尝试过的解析器，当我在 HTML 模式下解析代码段时，CDATA 部分会中断，但是当我解析它时在 XML 模式下，HTML 实体没有被正确解释。
下面是一个例子，我如何让它在浏览器中工作，但我如何使用 jsdom 和 cheerio 让它工作失败。我可以使用任何其他库来实现此目的，或者使用 jsdom 或 cheerio 的任何不同方式吗？
在浏览器中
在浏览器中，我可以在 XML 模式下使用 DOMParser。使用测试片段 <span>ö<![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>ö<![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>ö<![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.
更新： 我有 reported jsdom 的问题。
欢呼声
我在后端进行 DOM 修改的首选方法是 cheerio。在 HTML 模式下使用 cheerio，CDATA 部分将转换为注释。在 XML 模式下，实体不被解释而是双重转义为 &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>ö<![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>&ouml;<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true }).root().find('body').html(); // öä
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').html(); // <span>ö<![CDATA[ä]]></span>
cheerio.load(xhtml, { xmlMode: true, decodeEntities: false }).root().find('body').text(); // öä
更新： 我有 reported 问题给 cheerio。
我是 pointed out cheerio 中问题的解决方法：
cheerio.load(xhtml, { xml: { xmlMode: false, recognizeCDATA: true, recognizeSelfClosing: true } });
使用这些选项，我可以在 Node.js 环境中成功解析 XHTML。
除了这个解决方案，我注意到在浏览器中使用 DOMParser 的缺点是浏览器之间存在不一致。特别是，当结合使用查询选择器和 XML 命名空间时，我有时不得不在查询中包含命名空间，有时则不需要。由于这些不一致，jquery 也 officially doesn't support XML namespaces。为了在浏览器之间以及前端、前端测试和后端之间实现一致的行为，我决定使用 cheerio 甚至在浏览器中解析 XHTML。