如何用JavaScript网页爬虫提取HTML标签内的文本值？

核心解决方案 #

用Cheerio的选择器定位目标标签后，调用.text()方法即可提取标签内的文本内容，针对沃尔玛商品页面的场景，具体实现如下：

后端修正代码（Express+Axios+Cheerio） #

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const cors = require('cors');
const app = express();
const port = 3000;

// 解决跨域问题（如果前端和后端不在同一域名下）
app.use(cors());

app.get('/get-walmart-price', async (req, res) => {
  try {
    // 替换为实际的沃尔玛商品页面URL
    const targetUrl = 'https://www.walmart.com/ip/your-product-id';
    // 添加请求头绕过基础反爬
    const response = await axios.get(targetUrl, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
      }
    });
    
    const $ = cheerio.load(response.data);
    // 定位目标标签并提取文本，trim()去除多余空格换行
    const priceText = $('span[itemprop="price"]').text().trim();

    if (priceText) {
      res.json({ success: true, price: priceText });
    } else {
      res.json({ success: false, msg: '未找到目标价格标签' });
    }
  } catch (err) {
    res.json({ success: false, msg: '抓取失败', error: err.message });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

前端调用代码示例 #

// 用fetch调用后端接口并打印结果
fetch('http://localhost:3000/get-walmart-price')
  .then(res => res.json())
  .then(result => {
    if (result.success) {
      console.log('抓取到的价格:', result.price); // 输出「Now $24.97」
    } else {
      console.error('错误:', result.msg);
    }
  })
  .catch(err => console.error('请求失败:', err));

关键注意点 #

• 选择器要精准：$('span[itemprop="price"]')直接匹配目标属性的标签，避免冗余
• 处理反爬：沃尔玛会验证请求头，必须添加User-Agent模拟浏览器请求，否则可能返回403或空页面
• 异常处理：要覆盖请求失败、标签不存在等场景，避免服务崩溃

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