javascript - Cheeriojs 解析问题 : cannot find tag?

Question

背景

我正在使用 cheeriojs 解析 HTML 页面在我的 NodeJs 应用程序中。目标是从该页面获取一系列链接。

问题

该库运行良好，但我对一组特定的标签(两个 <a> 标签)有疑问，cheerio 无法识别我一生的挚爱!

<a href="/wiki/Orokin_Void" title="Orokin Void" class="mw-redirect">Orokin Void</a> <a href="/wiki/Storage_Containers" title="Storage Containers" class="mw-redirect">Containers</a>

我检查并仔细检查标签的结构是否理想

因此，根据文档，以下代码将打印 2 :

let htmlSource = '<a href="/wiki/Orokin_Void" title="Orokin Void" class="mw-redirect">Orokin Void</a> <a href="/wiki/Storage_Containers" title="Storage Containers" class="mw-redirect">Containers</a>';
let cheerioStuff = $(htmlSource).find("a").length;
console.print(cheerioStuff);

相反，它打印 0 。这令人着迷，至少对我来说。另一个字符串 Corpus T3 <a href="/wiki/Defense" title="Defense">Defense</a> Reward 似乎也出现同样的问题。

但是，它适用于以下内容:

<div class="pi-data-value pi-font"><a href="/wiki/Orokin_Vault" title="Orokin Vault" class="mw-redirect">Orokin Vault</a></div>

或者这个:

<a href="/wiki/Lynx_Osprey" title="Lynx Osprey">Lynx Osprey</a>

问题

此时，很可能::

1. 我的 HTML 源代码中有一些不可见的特殊字符，Cheerio 不喜欢。
2. cheerio 只会找到 <a>标签包含在其他标签中，或者它们是单独的。

我已经测试了第一个选项，但结果没有改变。所以现在我倾向于相信这个问题是第二种选择，我发现它的局限性很大。

它也可以是两者的组合，在这种情况下，我彻底完蛋了。

我怎样才能做到这一点？有什么建议么？

Answer 1

find 查找当前集合中元素的后代，但您的 a 元素不是后代，它们是 当前集合(例如，顶层)。您需要过滤器:

let cheerioStuff = $(htmlSource).filter("a").length;

...或者如果您想涵盖这两个基础，则可能是 filter 和 find 的组合:

let elements = $(htmlSource);
let cheerioStuff = elements.find("a").add(elements.filter("a")).length;

例如，输出2:

"use strict";
let $ = require('cheerio');

let htmlSource = '<a href="/wiki/Orokin_Void" title="Orokin Void" class="mw-redirect">Orokin Void</a> <a href="/wiki/Storage_Containers" title="Storage Containers" class="mw-redirect">Containers</a>';
let elements = $(htmlSource);
let cheerioStuff = elements.find("a").add(elements.filter("a")).length;
console.log(cheerioStuff);

...而这个:

"use strict";
let $ = require('cheerio');

let htmlSource = '<div><a href="/wiki/Orokin_Void" title="Orokin Void" class="mw-redirect">Orokin Void</a></div> <a href="/wiki/Orokin_Void" title="Orokin Void" class="mw-redirect">Orokin Void</a> <a href="/wiki/Storage_Containers" title="Storage Containers" class="mw-redirect">Containers</a>';
let elements = $(htmlSource);
console.log("find: " + elements.find("a").length);
console.log("filter " + elements.filter("a").length);
console.log("combined: " + elements.find("a").add(elements.filter("a")).length);

...输出:

find: 1filter 2combined: 3

...因为我在 div 中添加了一个。