JavaScript 木偶操纵者抓取一个变量

Question

我正在尝试从保存 HTML 数据的变量中抓取 HTML 数据。你可以看到我的注释，它们被标记为“<<”。不幸的是，evaluate 只适用于 div 上的页面。有人能告诉我如何从包含 HTML 的变量中抓取信息吗？

是否还有其他抓取方法？

我也在 forEach 循环中尝试了这个，但这导致了原始文档的第一个 mealname。

let mealName = htmlOfOneProduct.document.querySelector("div.meal__description-texts.js-meal-description-text > span > span").innerText;

我的代码和注释：

const puppeteer = require('puppeteer');
function run () {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            await page.goto(" "); << Meal website
            let urls = await page.evaluate(() => {
                let results = [];
                let items = document.querySelectorAll('div.meal__wrapper'); << Gets all the meals from a page
                items.forEach((item) => {
                    let htmlOfOneProduct = item.innerHTML; << Gets the HTML of each meal

                    let mealName = htmlOfOne.evaluate(() => document.querySelector('meal-name').textContent); << Not working, should get the meal-name from the div.

                    results.push({
                        mealName: mealName
                    });
                });
                return results;
            })
            browser.close();
            return resolve(urls);
        } catch (e) {
            return reject(e);
        }
    })
}
run().then(console.log).catch(console.error);

Answer 1

由于您没有提供网站URL，我无法检查我的提案，抱歉。

item.innerHTML returns 没有 evaluate() 方法的字符串。试试这个更简单的方法：

                items.forEach((item) => {
                    let mealName = item.querySelector('meal-name').textContent;
                    results.push({
                        mealName: mealName
                    });
                });

Answer 2

也许let htmlOfOneProduct = item.innerHTML; << Gets the HTML of each meal没有必要。

如果您只需要某些内容，您可以直接执行 item.innerText 或 item.name 或该元素的任何其他专有内容。

最后应该是这样的：

items.forEach((item) => {    
   let mealName = item.querySelector('meal-name').innerText
   results.push({
        mealName: mealName
   });
});

Answer 3

您还可以组合 CSS 选择器并使用 Array.from() to simplify scraping the innerText 元素：

let urls = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('div.meal__wrapper span.meal-name'), e => ({
    mealName: e.innerText,
  });
});

JavaScript 木偶操纵者抓取一个变量

JavaScript Puppeteer Scraping a Variable

javascript

node.js

web-scraping

google-chrome-devtools

puppeteer