如何使用 Cheerio 和 Puppeteer 将 HTML 网站刮成 JSON？

Question

我是 JS 的新手。我想问我们如何将 HTML 网站抓取到 JSON 文件中

该网站是一个考试测试网站。所以它有多个"view-question 标签，如图所示。我想将它们全部抓取到一个 JSON 文件中，即data.json。

目前，我正在使用 Puppeter 和 Cheerio：

const puppeteer = require('puppeteer');
const url = 'http://tracnghiem.itrithuc.vn/tra-cuu-cau-hoi?grade=12&subject=1&level='
const cheerio = require('cheerio');
const jsonfile = require('jsonfile');
const request = require('request')


puppeteer
.launch()
.then(function(browser){
    return browser.newPage();
})
.then(function(page){
    return page.goto(url).then(function(){
        return page.content()
    })
})
.then(function(html){
    const $ = cheerio;
    $('.view-question', html).each(function(){
        jsonfile.writeFile('data.json',$(this).text())
    })
})
.catch(function(err){
    console.warn(err);

})

我得到的结果在这里：

"\n\n                                            Câu 113915. Phần thực và phần ảo của số phức z=3+i lần lượt là:\n                                            \n                                            A. 3 và 1\n                                            B. 1 và 3\n\n                                                                                            C. 3 và 0\n                                                                                                                                        D. 3 và i\n                                            \n\n                                            \n\n                                                Câu trả lời đúng: Đáp án A\n                                                Hướng dẫn giải: \n                                                \n                                                                                                            Nếuz=a+bithì:\n+ Phần thực là a\n+ Phần thực là b\nSuy ra z=3+i có phần thực là 3, phần ảo là 1\n                                                    \n                                                \n                                                                                                                                            \n\n                                        "
         "
 \n\n                                        "
                            "
                                 "
     "
         \n\n                                        "

我不知道为什么节点会像那样显示那些\n...

请帮忙！！！

更新 1

我尝试使用$(this).html()，但它仍然无法正常工作。结果

"\n\n                                            <p><b>C&#xE2;u 113915.</b> Ph&#x1EA7;n th&#x1EF1;c v&#xE0; ph&#x1EA7;n &#x1EA3;o c&#x1EE7;a s&#x1ED1; ph&#x1EE9;c $z=3+i$ l&#x1EA7;n l&#x1B0;&#x1EE3;t l&#xE0;:</p>\n                                            \n                                            <p><b>A.</b> 3 v&#xE0; 1</p>\n                                            <p><b>B.</b> 1 v&#xE0; 3</p>\n\n                                                                                            <p><b>C.</b> 3 v&#xE0; 0</p>\n                                                                                                                                        <p><b>D.</b> 3 v&#xE0; i</p>\n                                            \n\n                                            <div class=\"box-guide\" style=\"display: none;\" id=\"div-113915\">\n\n                                                <p>C&#xE2;u tr&#x1EA3; l&#x1EDD;i &#x111;&#xFA;ng: <b>&#x110;&#xE1;p &#xE1;n A</b></p>\n                                                <p><i>H&#x1B0;&#x1EDB;ng d&#x1EAB;n gi&#x1EA3;i: </i></p>\n                                                <div class=\"view-guide\" id=\"view-question-guide\">\n                                                                                                            <p>$N&#x1EBF;u z=a+bi  th&#xEC;:$\n+ Ph&#x1EA7;n th&#x1EF1;c l&#xE0; a\n+ Ph&#x1EA7;n th&#x1EF1;c l&#xE0; b\nSuy ra $z=3+i$ c&#xF3; ph&#x1EA7;n th&#x1EF1;c l&#xE0; 3, ph&#x1EA7;n &#x1EA3;o l&#xE0; 1</p>\n                                                    \n                                                </div>\n                                                                                                                                            </div>\n\n                                        " <
/div>\n\n                                        " <
/div>\n\n                                        "
"\
n < /div>\n                                                                                                                                            </div > \n\ n " <
    /div>\n\n                                        " <
    /div>\n\n                                        "

Answer 1

抱歉，如果我不了解所有要求。

1. 有了puppeteer，你就不需要cheerio（除非你肯定需要jQuery糖）：puppeteer可以在文档上下文中运行任何JavaScript并传输数据，无需重新解析HTML源代码cheerio。

2. 似乎$(this).text() 和$(this).html() 就像element.textContent 和element.innerHTML — 它们保存了所有源标记，因此您可以获得所有额外的空格。您可能需要element.innerText 才能获得可读文本。

我可以建议这个变体：

const puppeteer = require('puppeteer');
const { writeFileSync } = require('fs');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('http://tracnghiem.itrithuc.vn/tra-cuu-cau-hoi?grade=12&subject=1&level=');

    const data = await page.evaluate(() => {
      return Array.from(
        document.querySelectorAll('.view-question'),
        element => element.innerText
      );
    });

    writeFileSync('data.json', JSON.stringify(data, null, '  '));

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

你会得到这个 JSON：

[
  "Câu 115340. Cho a, b, c là các số thực và z=−\n1\n\n\n2\n+i\n√\n3\n\n\n2\n. Giá trị của (a+bz+cz2)(a+bz2+cz) bằng\n\nA. a+b+c.\n\nB. a2+b2+c2−ab−bc−ca.\n\nC. a2+b2+c2+ab+bc+ca.\n\nD. a2+b2+c2+ab+bc+ca.",
  "Câu 115339. Tính tổng S của các phần thực của tất cả các số phức z thỏa mãn điều kiện \nˉ\nz\n=\n√\n3\nz2.\n\nA. S=\n√\n3\n.\n\nB. S=\n√\n3\n\n\n6\n.\n\nC. S=\n2\n√\n3\n\n\n3\n.\n\nD. S=\n√\n3\n\n\n3\n.",
  "Câu 115338. Cho số phức z=a+bi ( với a,b∈R) thỏa |z|(2+i)=z−1+i(2z+3). Tính S=a+b.\n\nA. -1.\n\nB. 1.\n\nC. 7.\n\nD. -5",
  "Câu 115337. Nếu |z|=a; (a>0) thì \nˉ\nz\n2−a\n\n\nˉ\nz\n\nA. lấy mọi giá trị phức.\n\nB. là số thuần ảo.\n\nC. bằng 0.\n\nD. lấy mọi giá trị thực.",
  "Câu 115336. Có bao nhiêu số phức z thỏa |\nz+1\n\n\ni−z\n|=1 và |\nz−i\n\n\n2+z\n|=1?\n\nA. 1.\n\nB. 2.\n\nC. 3.\n\nD. 4.",
  "Câu 115335. Cho số phức z=(\n2+6i\n\n\n3−i\n)m,m nguyên dương. Có bao nhiêu giá trị m∈[1;50] để z là số thuần ảo?\n\nA. 24.\n\nB. 26.\n\nC. 25.\n\nD. 50.",
  "Câu 115333. Gọi z1, z2, z3, z4 là các nghiệm của phương trình (\nz−1\n\n\n2z−i\n)4=1. Tính giá trị biểu thức P=(z\n2\n1\n+1)(z\n2\n2\n+1)(z\n2\n3\n+1)(z\n2\n4\n+1) .\n\nA. P=2.\n\nB. P=\n17\n\n\n9\n.\n\nC. P=\n16\n\n\n9\n.\n\nD. P=\n15\n\n\n9\n.",
  "Câu 115214. Tập hợp điểm biểu diễn các số phức z thỏa mãn: |z – (3 – 4i)| = 2 là\n\nA. đường tròn tâm I(3; –4) và bán kính 2\n\nB. đường tròn tâm I(–3; 4) và bán kính 2\n\nC. đường tròn tâm I(3; –4) và bán kính 4\n\nD. đường tròn tâm I(–3; 4) và bán kính 4",
  "Câu 114681. Tổng các nghiệm phức của phương trình z3+z2−2=0 là\n\nA. 1.\n\nB. −1.\n\nC. −i.\n\nD. 1+i.",
  "Câu 114676. Cho số phức z=a+bi(a,b∈Z) thỏa mãn |z+2+5i|=5 và z.\nˉ\nz\n=82. Tính giá trị của biểu thức P=a+b.\n\nA. 10.\n\nB. −8.\n\nC. −35.\n\nD. −7.",
  "Câu 114675. Tìm số phức z thỏa mãn |z−3|=|z−1| và (z+2)(\nˉ\nz\n−i) là số thực\n\nA. z=2.\n\nB. z=−2+2i.\n\nC. z=2−2i.\n\nD. không có z.",
  "Câu 114673. Có bao nhiêu số phức z thỏa mãn |z|=|z+\nˉ\nz\n|=1?\n\nA. 0.\n\nB. 1.\n\nC. 4.\n\nD. 3.",
  "Câu 114672. Cho 1+i2+i4+i6+⋯+i2016+i2018=a+bi với a,b∈R. Tính giá trị của H=3a−b.\n\nA. H=0.\n\nB. H=3.\n\nC. H=2.\n\nD. H=3030.",
  "Câu 114670. Tìm các căn bậc hai của -12  trong tập số phức C.\n\nA. ±2\n√\n2\ni.\n\nB. ±2\n√\n3\ni.\n\nC. ±4\n√\n3\ni.\n\nD. ±3\n√\n2\ni.",
  "Câu 113915. Phần thực và phần ảo của số phức z=3+i lần lượt là:\n\nA. 3 và 1\n\nB. 1 và 3\n\nC. 3 và 0\n\nD. 3 và i"
]