Cheerio .text() returns 错误响应

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 变化，如 .

中所述

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();
})();

作为旁注，可以使用以下代码片段来计时文本更改，然后使用此值为 .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())

Cheerio .text() returns 错误响应

Cheerio .text() returns wrong response

html

node.js

cheerio

puppeteer