Cheerio .text() 返回错误的响应

Question

我在 node.js 中使用cheerio 来获取网站的元素。有了这个，我就可以制作星星和其他东西了。

我只想取以下代码中的文字：

<div id="graphDD3" class="pie-chart small" style="padding: 0px; position: relative;">
   42.2%    
<canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px;" width="100" height="100"></canvas>
<canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px;" width="100" height="100"></canvas>
</div>

我尝试了以下代码

let rate = $('#graphDD3').text().trim();
console.log(rate);

但我的控制台显示的是 0 而不是 42.2%

有人可以帮助我吗？或者你知道解决这个问题的另一种解决方案吗？

感谢那些愿意花时间帮助我的人。

Answer 1

更新 2

以下 Puppeteer 代码在提取文本之前等待 3000ms。您可以手动更新此延迟，也可以设置一个函数来监控 HTML 更改，如 answer 中所述。

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('http://localhost:8000',{ waitUntil: 'domcontentloaded' });

    await page.waitFor(3000);
    console.log(await page.$eval('#graphDD3', el => el.innerText));

    await browser.close();
})();

作为旁注，可以使用以下 sn-p 来计时文本更改，然后使用此值为.waitFor() 方法提供适当的延迟。 但不要在不考虑所有后果的情况下按原样使用这个无限循环。

var startTime  = new Date()
  while(true){
    const val = await page.$eval('#graphDD3', el => el.innerText);
    if(val != '0'){
      console.log(val);
      break;
    } 
  }
 console.log(new Date - startTime);

---

更新 1

您的代码中没有语法错误，因此问题可能是由于 JavaScript 呈现的内容造成的。在这种情况下，要获得正确的结果，您必须使用无头浏览器（例如 puppeteer）呈现页面，然后才能提取信息。

---

原答案

.text() 是一个方法而不是一个属性。所以代码应该是：

let rate = $('#graphDD3');
console.log(rate.text().trim())