将 post 变量与 querySelector 一起使用答案

【问题标题】：Use post variable with querySelector将 post 变量与 querySelector 一起使用
【发布时间】：2021-03-17 18:01:25
【问题描述】：

我在尝试使用 puppeteer 和 querySelector 在网络上抓取数据时遇到问题。

我有一个处理后查询的 nodeJS WebServer，然后调用一个函数来抓取数据。我正在发送 2 个参数（postBlogUrl 和 postDomValue）。

PostDomValue 将包含我试图从中获取数据的选择器作为字符串，例如： [itemprop='articleBody']。

如果我手动建议选择器 ([itemprop='articleBody'])，一切正常，我可以检索数据，但如果我使用 postDomValue var，则不会返回任何内容。

我已经尝试使用 CSS.escape(postDomValue) 转义 var，但没有成功。

fetchBlogContent: async function(postBlogUrl, postDomValue) {
try {
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.launch();
  page = await browser.newPage();
  await page.goto(postBlogUrl, {
    waitUntil: 'load'
  })
  let description = await page.evaluate(() => {
    //This works return document.querySelector("[itemprop='articleBody']").innerHTML;
    //This won't return document.querySelector(postDomValue).innerHTML;
  })
  return description
} catch (err) {
  // handle err
  return err;
 }
}

【问题讨论】：

document.querySelector(`${postDomValue}`).innerHTML
不幸的是我已经尝试过这种方法，但总是返回一个空结果
你试过JSON.stringify(postDomValue)吗？
确实，我也试过了
你确定postDomValue 计算结果为[itemprop='articleBody']

标签： node.js dom puppeteer queryselector

【解决方案1】：


const description = await page.evaluate((value) => 
    document.querySelector(value).innerHTML, JSON.stringify(postDomValue));

请参阅有关如何将 args 传递给 page.evaluate() in puppeteer 的文档

【讨论】：

【解决方案2】：

如果我理解正确，问题可能是您尝试在浏览器上下文中执行的page.evaluate() 的参数函数内使用在 Node.js 上下文中声明的变量。在这种情况下，您需要将变量的值作为附加参数传递：

  let description = await page.evaluate((selector) => {
    return document.querySelector(selector).innerHTML;
  }, postDomValue);

在page.evaluate() 中查看更多信息。

【讨论】：

selector 变量将在您以这种方式调用page.evaluate() 时自动设置为等于postDomValue。
哈哈，我在聊天中回答了这个问题
然后你可以添加一个答案，以便它可以被接受）
非常感谢你们，你们的两个答案都有效，但 fortunee 建议的答案也适用于我的其他 json 值
是的，@fortunee 已经更加关注您的问题）