乐闻世界logo
搜索文章和话题

Cheerio 使用中的常见问题有哪些？如何解决这些问题？

2月22日 14:30

Cheerio 提供了丰富的 API，但在实际使用中，开发者经常会遇到一些常见问题。以下是 Cheerio 使用中的常见问题及其解决方案：

1. 中文乱码问题

问题描述

当抓取包含中文的网页时，出现乱码。

解决方案

javascript
const axios = require('axios');
const cheerio = require('cheerio');
const iconv = require('iconv-lite');

async function scrapeWithEncoding(url) {
  // 方案1：设置响应类型为 arraybuffer
  const response = await axios.get(url, {
    responseType: 'arraybuffer',
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
    }
  });
  
  // 方案2：检测编码并转换
  let html = response.data;
  
  // 检测 Content-Type 中的编码
  const contentType = response.headers['content-type'] || '';
  const charsetMatch = contentType.match(/charset=([^;]+)/i);
  
  if (charsetMatch) {
    const charset = charsetMatch[1].toLowerCase();
    if (charset !== 'utf-8') {
      html = iconv.decode(Buffer.from(html), charset);
    }
  }
  
  // 方案3：从 HTML meta 标签获取编码
  const $temp = cheerio.load(html);
  const metaCharset = $temp('meta[charset]').attr('charset');
  if (metaCharset && metaCharset.toLowerCase() !== 'utf-8') {
    html = iconv.decode(Buffer.from(html), metaCharset);
  }
  
  const $ = cheerio.load(html);
  return $('title').text();
}

2. 选择器找不到元素

问题描述

使用选择器查询时返回空结果，但元素确实存在。

解决方案

javascript
const cheerio = require('cheerio');

const html = `
  <div class="container">
    <p class="text">Hello</p>
  </div>
`;

const $ = cheerio.load(html);

// 问题：选择器错误
console.log($('.container p.text').length); // 1

// 解决方案1：检查选择器语法
console.log($('.container > p.text').length); // 1

// 解决方案2：使用更宽松的选择器
console.log($('.container .text').length); // 1

// 解决方案3：逐步调试
console.log($('.container').length); // 1
console.log($('.container p').length); // 1
console.log($('.container p').hasClass('text')); // true

// 解决方案4：使用 contains() 查找包含文本的元素
console.log($('p:contains("Hello")').length); // 1

// 解决方案5：检查 HTML 是否正确加载
console.log($.html()); // 查看完整的 HTML

3. 动态内容无法获取

问题描述

页面中通过 JavaScript 动态加载的内容无法获取。

解决方案

javascript
const cheerio = require('cheerio');
const axios = require('axios');

// 问题：直接使用 Cheerio 无法获取动态内容
async function scrapeStatic() {
  const response = await axios.get('https://example.com/dynamic');
  const $ = cheerio.load(response.data);
  console.log($('.dynamic-content').text()); // 空
}

// 解决方案：结合 Puppeteer
const puppeteer = require('puppeteer');

async function scrapeDynamic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com/dynamic');
  
  // 等待动态内容加载
  await page.waitForSelector('.dynamic-content');
  
  const html = await page.content();
  await browser.close();
  
  const $ = cheerio.load(html);
  console.log($('.dynamic-content').text()); // 有内容
}

// 解决方案：直接调用 API
async function scrapeAPI() {
  const response = await axios.get('https://example.com/api/data');
  const data = response.data;
  console.log(data); // 直接获取 JSON 数据
}

4. 内存占用过高

问题描述

处理大量 HTML 时内存占用过高，导致程序崩溃。

解决方案

javascript
const cheerio = require('cheerio');

// 问题：一次性处理大文件
function processLargeFileBad(html) {
  const $ = cheerio.load(html);
  const results = [];
  
  // 处理数百万个元素
  $('.item').each((i, el) => {
    results.push({
      title: $(el).find('.title').text(),
      content: $(el).find('.content').text()
    });
  });
  
  return results;
}

// 解决方案1：分批处理
function processLargeFileGood(html) {
  const $ = cheerio.load(html);
  const batchSize = 1000;
  const total = $('.item').length;
  const results = [];
  
  for (let i = 0; i < total; i += batchSize) {
    const $batch = $('.item').slice(i, i + batchSize);
    const batchData = $batch.map((j, el) => ({
      title: $(el).find('.title').text(),
      content: $(el).find('.content').text()
    })).get();
    
    results.push(...batchData);
    
    // 及时清理
    $batch = null;
    
    // 强制垃圾回收（开发环境）
    if (global.gc) {
      global.gc();
    }
  }
  
  return results;
}

// 解决方案2：使用流式处理
const fs = require('fs');
const { Transform } = require('stream');

function processWithStream(filePath) {
  return new Promise((resolve, reject) => {
    const results = [];
    let buffer = '';
    
    const transformStream = new Transform({
      transform(chunk, encoding, callback) {
        buffer += chunk.toString();
        
        // 按标签分割处理
        const items = buffer.match(/<item[^>]*>[\s\S]*?<\/item>/g) || [];
        
        items.forEach(item => {
          const $ = cheerio.load(item);
          results.push({
            title: $('.title').text(),
            content: $('.content').text()
          });
        });
        
        // 清理已处理的内容
        const lastIndex = buffer.lastIndexOf('</item>');
        if (lastIndex !== -1) {
          buffer = buffer.slice(lastIndex + 7);
        }
        
        callback();
      },
      
      flush(callback) {
        resolve(results);
        callback();
      }
    });
    
    fs.createReadStream(filePath)
      .pipe(transformStream)
      .on('error', reject);
  });
}

5. 相对路径处理问题

问题描述

提取的链接是相对路径，无法直接访问。

解决方案

javascript
const cheerio = require('cheerio');
const { URL } = require('url');

function resolveLinks(html, baseUrl) {
  const $ = cheerio.load(html);
  const links = [];
  
  $('a[href]').each((i, el) => {
    const href = $(el).attr('href');
    const absoluteUrl = new URL(href, baseUrl).href;
    
    links.push({
      text: $(el).text().trim(),
      href: href,
      absoluteUrl: absoluteUrl
    });
  });
  
  return links;
}

// 使用示例
const html = `
  <a href="/page1">Page 1</a>
  <a href="../page2">Page 2</a>
  <a href="https://example.com/page3">Page 3</a>
`;

const links = resolveLinks(html, 'https://example.com/dir/index.html');
console.log(links);

6. 表单数据提取问题

问题描述

提取表单数据时遇到复选框、多选框等复杂情况。

解决方案

javascript
const cheerio = require('cheerio');

function extractFormData(html) {
  const $ = cheerio.load(html);
  const formData = {};
  
  // 文本输入
  $('input[type="text"]').each((i, el) => {
    const name = $(el).attr('name');
    const value = $(el).val() || '';
    formData[name] = value;
  });
  
  // 复选框（多选）
  $('input[type="checkbox"]:checked').each((i, el) => {
    const name = $(el).attr('name');
    const value = $(el).val();
    
    if (!formData[name]) {
      formData[name] = [];
    }
    formData[name].push(value);
  });
  
  // 单选框
  $('input[type="radio"]:checked').each((i, el) => {
    const name = $(el).attr('name');
    const value = $(el).val();
    formData[name] = value;
  });
  
  // 下拉选择
  $('select').each((i, el) => {
    const name = $(el).attr('name');
    const selectedOption = $(el).find('option:selected');
    formData[name] = selectedOption.val();
  });
  
  // 多选下拉
  $('select[multiple]').each((i, el) => {
    const name = $(el).attr('name');
    const selectedOptions = $(el).find('option:selected');
    formData[name] = selectedOptions.map((j, opt) => $(opt).val()).get();
  });
  
  // 文本域
  $('textarea').each((i, el) => {
    const name = $(el).attr('name');
    const value = $(el).val() || '';
    formData[name] = value;
  });
  
  return formData;
}

7. HTML 实体编码问题

问题描述

HTML 中的特殊字符被编码，如 &nbsp;、&amp; 等。

解决方案

javascript
const cheerio = require('cheerio');

const html = '<div>Hello &amp; World &nbsp; Test</div>';

// 问题：默认会解码实体
const $ = cheerio.load(html);
console.log($('.div').text()); // "Hello & World   Test"

// 解决方案1：禁用实体解码
const $2 = cheerio.load(html, { decodeEntities: false });
console.log($2('.div').text()); // "Hello &amp; World &nbsp; Test"

// 解决方案2：手动处理实体
const he = require('he');
const text = he.decode($('.div').text());
console.log(text); // "Hello & World   Test"

// 解决方案3：使用 html() 方法获取原始 HTML
const rawHtml = $('.div').html();
console.log(rawHtml); // "Hello &amp; World &nbsp; Test"

8. 性能问题

问题描述

处理大量数据时性能不佳。

解决方案

javascript
const cheerio = require('cheerio');

// 问题：使用复杂选择器
function slowQuery($) {
  return $('div div div p span a').text();
}

// 解决方案1：使用更具体的选择器
function fastQuery1($) {
  return $('.container .link').text();
}

// 解决方案2：使用 find() 方法
function fastQuery2($) {
  return $('.container').find('.link').text();
}

// 解决方案3：缓存选择器结果
function fastQuery3($) {
  const $container = $('.container');
  return $container.find('.link').text();
}

// 解决方案4：使用原生方法
function fastestQuery($) {
  const container = $('.container')[0];
  return container.querySelector('.link').textContent;
}

9. 空白字符处理

问题描述

提取的文本包含大量空白字符。

解决方案

javascript
const cheerio = require('cheerio');

const html = `
  <div>
    <p>
      Hello
      World
    </p>
  </div>
`;

const $ = cheerio.load(html);

// 问题：包含大量空白
console.log($('p').text()); // "\n      Hello\n      World\n    "

// 解决方案1：使用 trim()
console.log($('p').text().trim()); // "Hello\n      World"

// 解决方案2：使用正则替换
console.log($('p').text().replace(/\s+/g, ' ').trim()); // "Hello World"

// 解决方案3：使用 normalizeWhitespace 选项
const $2 = cheerio.load(html, { normalizeWhitespace: true });
console.log($2('p').text()); // "Hello World"

// 解决方案4：自定义清理函数
function cleanText(text) {
  return text
    .replace(/[\r\n\t]+/g, ' ')  // 替换换行和制表符
    .replace(/\s+/g, ' ')         // 合并多个空格
    .trim();                      // 去除首尾空格
}

console.log(cleanText($('p').text())); // "Hello World"

10. XML 解析问题

问题描述

解析 XML 文档时出现问题。

解决方案

javascript
const cheerio = require('cheerio');

const xml = `
  <root>
    <item id="1">
      <name>Item 1</name>
    </item>
    <item id="2">
      <name>Item 2</name>
    </item>
  </root>
`;

// 解决方案：使用 XML 模式
const $ = cheerio.load(xml, { 
  xmlMode: true,
  decodeEntities: false
});

// 提取数据
const items = [];
$('item').each((i, el) => {
  items.push({
    id: $(el).attr('id'),
    name: $(el).find('name').text()
  });
});

console.log(items);

通过掌握这些常见问题的解决方案，可以更有效地使用 Cheerio 进行 HTML/XML 解析和数据提取。

标签：NodeJSCheerio
热门标签
更多
Git(114)C语言(23)C++(15)React(34)前端(148)Cypress(27)JavaScript(56)Linux(20)Rust(10)Docker(65)Mongoose(18)TypeScript(27)MySQL(8)Vue(13)Tailwind CSS(29)CSS(19)ElasticSearch(24)网络(12)TypeORM(31)