如何在ElectronJS中使用request获取指定class/Xpath对应的数据

解决方案 #

request 库仅负责发送HTTP请求获取响应内容，本身不支持HTML解析、DOM元素检索能力，你需要搭配对应工具实现按class提取内容。

静态渲染页面提取方案（目标.price元素直接存在于返回的HTML源码中） #

使用轻量HTML解析库cheerio，语法和jQuery一致，适配你的现有代码改造成本极低：

• 先安装依赖：
  npm install request cheerio
• 修改后代码：

const request = require('request')
const cheerio = require('cheerio')

request('https://www.livecoinwatch.com/price/Spark-FLR', function (
  error,
  response,
  body
) {
  console.error('error:', error)
  if (!error && response.statusCode === 200) {
    const $ = cheerio.load(body)
    // 按class选择器提取内容，支持XPath扩展，常规类选择器直接用即可
    const price = $('.price').text().trim()
    console.log('提取到的价格：', price)
  }
})

动态渲染页面提取方案（目标.price元素由前端JS运行后生成，静态HTML中不存在） #

如果运行上述代码拿不到价格，说明页面是客户端动态渲染，需要使用无头浏览器加载页面等待渲染完成后再提取，推荐用puppeteer：

• 先安装依赖：
  npm install puppeteer
• 实现代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  // 加载页面等待网络空闲，保证渲染完成
  await page.goto('https://www.livecoinwatch.com/price/Spark-FLR', { waitUntil: 'networkidle2' })
  const price = await page.$eval('.price', el => el.textContent.trim())
  console.log('提取到的价格：', price)
  await browser.close()
})()

内容的提问来源于stack exchange，提问作者user15502553