使用td替代nth-child爬取Whale Alert表格时的异常问题

问题根源 #

USD Stable Transfer和USD Stable Mint/Burn这两行的HTML结构和其他货币行存在差异（比如使用colspan合并单元格，或是字段所在的td位置偏移），导致固定的nth-child选择器无法匹配到正确的Known字段元素。

解决方案：基于行结构动态定位字段 #

放弃固定索引的nth-child，改为遍历每行并根据行内单元格数量、内容分布动态提取字段，具体代码示例如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://whale-alert.io/whales', { waitUntil: 'networkidle2' });

  const whaleData = await page.evaluate(() => {
    const rows = Array.from(document.querySelectorAll('table tbody tr'));
    return rows.map(row => {
      const tds = Array.from(row.querySelectorAll('td'));
      let currency = '', known = '', unknown = '';

      // 处理常规3单元格结构的行
      if (tds.length === 3) {
        currency = tds[0].textContent.trim();
        known = tds[1].textContent.trim();
        unknown = tds[2].textContent.trim();
      } 
      // 处理USD Stable类的特殊行（多为2单元格结构）
      else if (tds.length === 2) {
        currency = tds[0].textContent.trim();
        // 拆分合并单元格内的Known/Unknown值（以多空格为分隔符）
        const [knownVal, unknownVal] = tds[1].textContent.trim().split(/\s{2,}/);
        known = knownVal || '';
        unknown = unknownVal || '';
      }

      return { currency, known, unknown };
    }).filter(item => item.currency); // 过滤无有效货币名的空行
  });

  console.log(whaleData);
  await browser.close();
})();

关键调整点 #

1. 动态适配行结构：通过tds.length区分常规行和特殊行，避免固定索引的局限性
2. 拆分合并单元格内容：针对USD Stable行的合并单元格，用正则匹配多空格拆分Known和Unknown值
3. 过滤无效数据：最后过滤掉无货币名称的空行，保证数据有效性

额外调试建议 #

如果上述代码仍有问题，打开浏览器开发者工具（F12）对比两类行的HTML结构：

• 检查是否有隐藏元素（如display: none），若有可通过td.querySelector('.target-class').textContent精准提取
• 确认单元格内是否有嵌套标签（如<span>），需定位到具体子元素再获取文本

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