Puppeteer 爬取网页数据返回空数组问题解决方案

puppeteer 爬取网页数据返回空数组问题解决方案

本文针对使用 Puppeteer 爬取 naamhinaam.com 网站数据时,出现返回空数组的问题,提供了一套可行的解决方案。通过分析问题代码,找出选择器和循环逻辑上的错误,并提供优化后的代码示例,确保能正确抓取网页上的婴儿名字和含义信息,并避免因广告元素干扰导致的问题。本文还强调了headless模式的运用以及数据清洗的重要性。

问题分析

原始代码尝试通过循环遍历页面上的元素,并根据复杂的 CSS 选择器提取婴儿名字。然而,这种方法存在几个问题:

不稳定的选择器: 原始代码中使用的 CSS 选择器 div.name-suggestion.mt-1 > div > div:nth-child(${i}) > div.nsg__name_meaning > a 非常具体,一旦网站结构发生轻微变化,就会导致选择器失效,从而无法抓取到数据。广告元素干扰: 尝试移除广告元素,但移除操作可能并不稳定,或者广告元素的出现方式不固定,导致循环逻辑出错。不必要的条件判断: 循环内部的 if (await page.$(…)) 判断可能会导致跳过某些元素,影响数据的完整性。循环索引错误: 循环索引从3开始,跳过了前面两个元素,可能导致数据丢失

解决方案

为了解决上述问题,我们应该采用更稳定、更灵活的方法来提取数据。以下是优化后的代码示例:

const puppeteer = require("puppeteer");const express = require("express");const cors = require("cors");const app = express();app.use(cors());let data = [];(async () => {  const browser = await puppeteer.launch({    headless: true, // 建议使用 headless 模式    defaultViewport: null,  });  const page = await browser.newPage();  for (let pageNumber = 1; pageNumber  i`);    // 确保名字和含义的数量一致    if (nameElements.length !== meaningElements.length) {      console.warn(`页面 ${pageNumber} 上的名字和含义数量不一致,可能存在问题。`);      continue; // 跳过当前页面    }    for (let i = 0; i  el.textContent, nameElements[i]);        let meaning = await page.evaluate(el => el.textContent, meaningElements[i]);        fullName = `${name.split(/[nt]/).join('').trim()}, ${meaning}`;        data.push({ fullName });      } catch (error) {        console.error(`处理页面 ${pageNumber} 的第 ${i} 个元素时出错:`, error);      }    }  }  console.log(data);  await browser.close();})();app.get("/", (req, res) => {  res.status(200).json(data);});app.listen(3000, () => {  console.log("App is running...");});

代码解释:

Headless 模式: 建议将 headless 设置为 true,在后台运行浏览器,提高效率。更稳定的选择器: 使用 a.nsg__name 和 div.nsg__meaning > i 这样更简洁、更通用的选择器,降低因网站结构变化导致的问题。数量一致性检查: 在循环之前,检查名字和含义元素的数量是否一致。如果不一致,说明页面结构可能存在问题,跳过当前页面,避免数据错误。错误处理: 在循环内部添加 try…catch 块,捕获可能出现的错误,并记录错误信息,方便调试。数据清洗: 使用 name.split(/[nt]/).join(”).trim() 清除名字中的换行符、制表符和空格,确保数据的干净。

注意事项

网站结构变化: 网页结构随时可能发生变化,因此需要定期检查和更新选择器。反爬机制: 网站可能存在反爬机制,如验证码、IP 封锁等。需要根据具体情况采取相应的应对措施,如使用代理 IP、设置合理的请求间隔等。法律法规: 在爬取网站数据时,务必遵守相关法律法规和网站的使用条款,不得进行恶意爬取或侵犯网站权益的行为。

总结

通过使用更稳定的选择器、进行数量一致性检查、添加错误处理机制以及清洗数据,我们可以更可靠地使用 Puppeteer 爬取网页数据。同时,需要注意网站结构变化、反爬机制以及法律法规等问题,确保爬虫的稳定性和合法性。

以上就是Puppeteer 爬取网页数据返回空数组问题解决方案的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1518844.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 11:55:10
下一篇 2025年12月20日 11:55:27

相关推荐

  • TypeScript中私有字段(#)与类型推断的ESLint解析问题及解决方案

    本文探讨了在TypeScript中使用私有字段(#)结合typeof和Parameters进行类型推断时可能遇到的ESLint解析错误。我们将深入分析该问题通常源于ESLint对私有字段语法在特定类型上下文中的支持限制,并提供一个实用的解决方案:改用private static关键字来定义私有方法,…

    2025年12月20日
    000
  • 掌握TailwindCSS动态更新元素颜色:编译时限制与运行时解决方案

    本文探讨了在标准TailwindCSS项目中动态更新元素背景颜色的挑战,特别是当颜色值由用户实时输入时。由于TailwindCSS的编译时特性,直接添加任意颜色值的类(如bg-[${colorValue}])通常无法生效。文章提供了一种可靠的解决方案:通过JavaScript直接操作元素的style…

    2025年12月20日
    000
  • 在TailwindCSS中动态设置元素颜色:原理与实践

    本文探讨了在TailwindCSS项目中动态更新元素背景颜色的有效方法。针对Tailwind编译时生成CSS的特性,直接通过JavaScript添加任意颜色值的Tailwind类可能无法生效。教程推荐使用直接操作DOM元素的style属性来设置动态颜色,并提供了详细的代码示例与最佳实践,确保在保持T…

    2025年12月20日
    000
  • 解决TailwindCSS动态颜色更新问题:Style属性的有效利用

    本文探讨了在生产环境中,使用TailwindCSS动态更新元素自定义颜色的挑战。由于Tailwind的编译时优化机制,直接通过classList.add添加包含任意值的类(如bg-[${colorValue}])通常无法生效。文章解释了此行为背后的原理,并提供了一种可靠的解决方案:通过JavaScr…

    2025年12月20日
    000
  • 动态更新TailwindCSS元素颜色值的实践指南

    本文探讨了在TailwindCSS项目中动态更新元素颜色值的挑战与解决方案。针对用户输入颜色值无法通过传统Tailwind类名动态添加的问题,文章详细解释了Tailwind编译机制的限制。最终,提出并演示了通过直接操作DOM元素的style属性来高效、可靠地实现颜色动态更新的方法,并提供了实用的代码…

    2025年12月20日
    000
  • Karate框架中利用locateAll结合属性过滤定位HTML元素

    本文详细介绍了如何在Karate框架中使用locateAll结合JavaScript过滤器,根据HTML元素的id或style等属性动态定位目标元素。通过示例代码,演示了如何筛选出特定div元素并提取其文本内容,为进行复杂的UI上下文验证提供了灵活高效的解决方案。 在进行Web UI自动化测试时,经…

    2025年12月20日
    000
  • React Router与Firebase认证:构建健壮的受保护路由

    本文深入探讨了在React应用中结合Firebase认证实现受保护路由的常见问题与解决方案。通过分析初学者常犯的无限重定向错误,文章详细阐述了onAuthStateChanged的异步特性以及如何利用React的useEffect钩子和加载状态,构建一个稳定、高效且用户体验友好的私有路由组件,确保用…

    2025年12月20日
    000
  • React Router与Firebase认证:构建安全保护路由的实践指南

    本文深入探讨了在React应用中使用React Router和Firebase Authentication实现保护路由时常见的无限重定向问题。核心在于组件初次渲染时认证状态未就绪,导致误判。通过引入useEffect钩子监听Firebase认证状态变化,并结合加载状态管理,可以有效解决这一问题,确…

    2025年12月20日
    000
  • 避免React中Firebase认证保护路由的无限重定向

    ,将用户重定向到登录页。onAuthStateChanged的执行时机:onAuthStateChanged是一个异步操作,它会在用户认证状态发生变化时触发。将其直接放置在组件的函数体中,每次组件重新渲染时都会重新注册监听器(尽管Firebase内部会处理重复注册,但这并非最佳实践),更重要的是,它…

    2025年12月20日
    000
  • React应用中Firebase认证与保护路由:避免无限重定向的正确姿势

    本文旨在解决React应用中结合Firebase认证和react-router-dom实现保护路由时常见的无限重定向问题。核心在于理解onAuthStateChanged的异步特性,并通过引入加载状态和正确使用useEffect钩子来管理用户认证状态,确保在认证状态确定前不进行路由跳转,从而构建健壮…

    2025年12月20日
    000
  • Vue 3 项目中图片和 SVG 资源加载的策略与实践

    本文深入探讨了在 Vue 3 项目中加载和管理各类图片资源的有效策略,包括静态图片、动态图片以及将 SVG 作为可复用组件的最佳实践。文章详细阐述了不同加载方式的适用场景、代码示例,并特别指出 vue-svg-loader 在 Vue 3 中的不兼容性,提供了将 SVG 转换为 Vue 组件的推荐方…

    2025年12月20日
    000
  • Vue 3 组件间通信:使用自定义事件控制子组件的显示与隐藏

    针对 Vue 3 中父组件管理子组件可见性的常见场景,本文详细介绍了如何通过自定义事件($emit)实现子组件向父组件发送关闭通知,进而由父组件控制子组件的显示与隐藏状态。通过清晰的代码示例和专业讲解,帮助开发者掌握这一关键的组件间通信模式。 引言:组件可见性管理的挑战 在 vue 3 应用开发中,…

    2025年12月20日
    000
  • JavaScript中监听单选按钮选中状态:事件机制与最佳实践

    本文深入探讨了在JavaScript中监听单选按钮选中状态的正确方法。针对没有专门的checked事件的常见误解,文章阐明应利用通用的input或change事件。通过事件委托技术,结合evt.target.closest()或evt.target.matches()方法识别目标元素,并访问其che…

    2025年12月20日
    000
  • PHP动态实现CSS Body背景图片随机切换教程

    本教程详细介绍了如何利用PHP的rand()函数,将静态的CSS body背景图片替换为每次页面刷新时从预设图像集中随机选择的图片。通过动态生成图片文件名,实现背景视觉的丰富性和多样性,有效提升用户体验。 在网页设计中,为了增加页面的趣味性和动态感,经常需要实现背景图片的随机切换效果。传统的css样…

    2025年12月20日
    000
  • 应对动态网页抓取挑战:通过内部API获取稳定HTML数据

    本教程深入探讨了网络爬虫在抓取动态网页时,因HTML结构不一致而导致失败的常见问题。针对IBM文档网站的案例,我们揭示了直接请求可能返回不完整或错误页面的原因,并提供了一种通过识别并调用网站内部API来稳定获取目标数据(特别是表格数据)的专业解决方案,确保爬取过程的可靠性和效率。 引言:动态网页抓取…

    2025年12月20日
    000
  • JavaScript数据结构更新:动态替换复杂嵌套对象中的特定Section

    本文将深入探讨如何在JavaScript中高效且非破坏性地更新复杂嵌套数据结构中的特定Section对象。通过利用ES6的扩展运算符,我们将演示如何创建一个新的数据副本,并在此过程中替换指定ID的Section,从而实现动态的数据更新,同时保持其他数据的完整性,这对于构建可维护和响应式应用至关重要。…

    2025年12月20日
    000
  • Vue 3 组件通信:通过自定义事件控制子组件的显示与隐藏

    本文详细介绍了在 Vue 3 中,如何通过自定义事件($emit)实现父组件对子组件显示状态的有效管理。当子组件需要通知父组件执行某个操作(如关闭自身)时,父组件监听子组件发出的事件并更新其内部状态,从而实现跨组件的交互控制,特别适用于模态框、表单等场景的开启与关闭逻辑。 1. 问题背景与场景分析 …

    2025年12月20日
    000
  • React-Redux组件状态访问与常见错误排查指南

    本文旨在解决React-Redux应用中常见的“Cannot read properties of undefined”和“state not found”错误。核心问题在于组件未正确连接到Redux store,导致无法访问全局状态,以及reducer中可能存在的拼写错误。通过示例代码,我们将详细…

    2025年12月20日
    000
  • Google Apps Script UI自定义菜单创建指南:避免常见错误

    本教程详细指导如何在Google Apps Script中创建自定义菜单,涵盖了针对Google表格和文档的不同UI对象选择、正确的菜单构建方法及常见的语法错误。通过示例代码和注意事项,帮助开发者高效、准确地为Google应用添加个性化功能,避免菜单不显示等问题。 在google apps scri…

    2025年12月20日
    000
  • Vue 3 中子组件如何向父组件传递事件以控制状态:自定义事件实践指南

    本教程详细阐述了在 Vue 3 应用中,如何通过自定义事件实现子组件向父组件传递状态变更信号。我们将以一个模态框的显示与隐藏为例,演示如何在子组件中触发事件,并在父组件中监听并响应这些事件,从而有效管理跨组件的响应式数据,确保组件间通信的清晰与高效。 1. Vue 3 组件通信概述 在 vue 3 …

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信