javascript - jsdom/cheerio 大大改变了 html

Question

我正在尝试抓取一个网站，但我遇到了 jsdom 和 cheerio 的问题，这些问题极大地改变了他们获得的 html。最值得注意的是，他们删除了一些标签，例如 table/tr/td 标签等

简单地让一个本地文件说 1.html 并做:

// with cheerio -> or equivalent with jsdom
var $ = require('cheerio').load(fs.readFileSync(path));
fs.writeFileSync('2.html', $.html());

# bash
$> diff 1.html 2.html

.....

<                       <tr><td colspan="5"><a id="stats" name="stats"></a><div class="titlebar1" style="margin-top: 12px;margin-bottom: 4px;"><h2>Stats</h2><div class="element"><img src="img/element/10.png" /></div><div class="elementborder"><img src="img/elementborder.png" /></div></div></td></tr></table></td></div>

---
>                       <tr><td colspan="5"><a id="stats" name="stats"></a><div class="titlebar1" style="margin-top: 12px;margin-bottom: 4px;"><h2>Stats</h2><div class="element"><img src="img/element/10.png"></div><div class="elementborder"><img src="img/elementborder.png"></div></div></div></td></tr>
54,57c53,56
<

.....

---

编辑: 我意识到这很可能是由于无效的 HTML，我的问题是无论如何我都可以避免这种情况，就像您在浏览器中正常查看页面一样，元素在那里

更准确地说，我正在尝试抓取这个:http://www.puzzledragonx.com/en/monster.asp?n=1

---

编辑:我意识到这也是某种浏览器问题。如果你用 wget 下载页面并用 cheerio 粘贴 HTML，你会得到一个不同的 html 是的，但是浏览器在解析 DOM 时删除了标签，这让我相信 cheerio/jsdom 输出时髦的 html

我还通过 html w3 验证器运行该页面，并且有很多关于 doctype 不允许将元素放置在特定位置的错误，但没有关于无效标记的错误

Answer 1

您输入的 HTML 格式似乎有误。 $.html() 序列化当前的 DOM 表示，除非输入的 HTML 在语法上正确，否则不会产生相同的 HTML。

要了解为什么会发生这种情况，请思考幕后发生的事情。 Cheerio 解析 HTML 文本为规范化数据结构。这个数据结构就是我们所说的 DOM:文档对象模型。 HTML 只是该模型的文本表示；在 cheerio 解析 HTML 之后，它会丢弃输入文本(因为它不再需要它)。

当您调用 $.html() 时，cheerio 必须将 DOM 数据结构转换回文档的文本表示形式。为此，它递归遍历 DOM 树并为每个 Node 生成 HTML。原始输入 HTML 字符串与输出 HTML 无关，除了 DOM 是用输入 HTML 填充的事实。

此时您应该明白，如果输入的 HTML 格式不正确，为什么解析 HTML 的库无法稍后输出完全相同的 HTML。输入文本的解析和规范化必然是有损的:宽容的解析器必须丢弃没有意义的 HTML 文本。

您甚至可以在 Chrome 中看到:do a diff of your page's source code and the string returned by document.documentElement.outerHTML .我们在这里也看到了许多差异，尤其是在格式错误的表格周围。 (一些差异是脚本运行和改变 DOM 的结果。)这些工件的出现原因与它们在 cheerio、jsdom 或任何其他 HTML 解析库中的原因相同。