使用 Node.js 和 XPath 对 HTML 页面进行高性能解析

Question

我正在使用 Node.js 进行一些网络抓取。我想使用 XPath，因为我可以使用多种 GUI 半自动生成它。问题是我找不到有效的方法。

1. jsdom 非常慢。它在一分钟左右的时间内解析了 500KiB 的文件，CPU 负载满载，内存占用很大。
2. 用于 HTML 解析的流行库（例如 cheerio）既不支持 XPath，也不公开符合 W3C 的 DOM。
3. 显然，有效的 HTML 解析是在 WebKit 中实现的，因此使用 phantom 或 casper 将是一种选择，但它们需要以特殊方式运行，而不仅仅是 node <script>。我不能依赖这种变化隐含的风险。例如，很难找到如何运行 node-inspector 和 phantom。
4. Spooky 是一个选项，但它是 buggy enough，所以它根本没有在我的机器上运行。

那么用 XPath 解析 HTML 页面的正确方法是什么？

Answer 1

我刚刚开始使用npm install htmlstrip-native，它使用native implementation 来解析和提取相关的html 部分。它声称比纯 js 实现快 50 倍（我尚未验证该说法）。

根据您的需要，您可以直接使用 html-strip，或者提升代码和绑定以使您拥有在 htmlstrip-native 内部使用的 C++

如果你想使用 xpath，那么使用这里已经可用的包装器； https://www.npmjs.org/package/xpath

Answer 2

Libxmljs 目前是最快的实现（like a benchmark），因为它只绑定到支持 XPath 1.0 查询的LibXML C 库：

var libxmljs = require("libxmljs");
var xmlDoc = libxmljs.parseXml(xml);
// xpath queries
var gchild = xmlDoc.get('//grandchild');

但是，您需要先清理 HTML 并将其转换为正确的 XML。为此，您可以使用 HTMLTidy 命令行实用程序 (tidy -q -asxml input.html)，或者如果您希望它仅保留节点，则可以使用类似 xmlserializer 的方法。

Answer 3

您可以通过几个步骤来完成。

1. 使用parse5 解析HTML。不好的部分是结果不是 DOM。虽然它足够快并且符合 W3C 标准。
2. 使用xmlserializer 将其序列化为XHTML，接受parse5 的类DOM 结构作为输入。
3. 使用xmldom 再次解析XHTML。现在你终于有了那个 DOM。
4. xpath 库建立在xmldom 之上，允许您运行 XPath 查询。请注意，XHTML 有自己的命名空间，//a 之类的查询不起作用。

你终于得到了这样的东西。

const fs = require('mz/fs');
const xpath = require('xpath');
const parse5 = require('parse5');
const xmlser = require('xmlserializer');
const dom = require('xmldom').DOMParser;

(async () => {
    const html = await fs.readFile('./test.htm');
    const document = parse5.parse(html.toString());
    const xhtml = xmlser.serializeToString(document);
    const doc = new dom().parseFromString(xhtml);
    const select = xpath.useNamespaces({"x": "http://www.w3.org/1999/xhtml"});
    const nodes = select("//x:a/@href", doc);
    console.log(nodes);
})();

请注意，您必须在查询的每个 HTML 元素前添加 x: 前缀，例如，匹配 div 中的 a 您需要：

//x:div/x:a

Answer 4

可能永远不会有正确的方法来解析 HTML 页面。对网络抓取和抓取的第一次评论告诉我，Scrapy 可以满足您的需求。它接受 CSS 和 XPath 选择器。在 Node.js 领域，我们有一个非常新的模块 node-osmosis。这个模块是基于 libxmljs 构建的，因此它应该支持 CSS 和 XPath，尽管我没有找到任何使用 XPath 的示例。

Answer 5

我认为Osmosis 是您要找的。​​p>

• 使用本机 libxml C 绑定
• 支持 CSS 3.0 和 XPath 1.0 混合选择器
• Sizzle 选择器、Slick 选择器等
• 没有像 jQuery、cheerio 或 jsdom 这样的大型依赖项

• HTML 解析器功能

  • 快速解析
  • 搜索速度非常快
  • 内存占用小

• HTML DOM 特性

  • 加载和搜索 ajax 内容
  • DOM 交互和事件
  • 执行嵌入式和远程脚本
  • 在 DOM 中执行代码

Here's an example:

osmosis.get(url)
    .find('//div[@class]/ul[2]/li')
    .then(function () {
        count++;
    })
    .done(function () {
        assert.ok(count == 2);
        assert.done();
    });

Answer 6

只需一行，您就可以使用xpath-html：

const xpath = require("xpath-html");

const node = xpath.fromPageSource(html).findElement("//*[text()='Made with love by']");