| JavaScript 网页抓取 | 您所在的位置：网站首页 › 获取网站源码在线使用 › JavaScript 网页抓取 |
JavaScript 网页抓取
|
原文：www.freecodecamp.org/news/web-sc… 欢迎来到爬虫的世界！你是否曾经需要来自网站的数据，却发现很难以特定的结构访问?这就是爬虫的用武之地。 使用脚本，我们可以从网站中提取需要的数据用于各种用途，如创建数据库，进行某些分析等。 免责声明: 需要注意，确保网站是允许爬取的，并且爬取行为是合情合法的。 JavaScript 和 Node.js 提供了各种便于爬取网站的库。对于简单的数据提取，你可以使用 Axios 获取 API 或者网站 HTML。 但是如果你想做包括自动化在内的更高级的任务，则需要 Puppeteer, Cheerio, 或者 Nightmare（别为它的名字是"梦魇"而担心，它用起来还不错😆） 这样的库。 本文将介绍使用 Puppeteer 在 JavaScript 和 Node.js 中抓取网页的基础知识。向你展示在网站上获取信息和点击按钮（如翻页）的一些基础知识。 最后，我会推荐一些我们刚创建的项目的改进点来练习和学习。 先决条件在开始使用 JavaScript，Node.js，和 HTML DOM 深入了解我们的第一个网站之前，建议对这些技术有一个基本的了解，这有助于你对该主题的学习和理解。 让我们开始吧！🤿 如何初始化第一个 Puppeteer 爬虫新项目。。。新文件夹！首先，创建名为 first-puppeteer-scraper-example的文件夹。我们爬虫的代码将保存在这里面。 mkdir first-puppeteer-scraper-example使用 mkdir 创建新项目 现在，该初始化带有 package.json 文件的 Node.js 仓库了。它能将仓库和 NPM 包（如 Puppeteer 库）的信息存储起来。 npm init -y使用命令 npm init 初始化 package.json 文件 输入这个命令之后，你能够在仓库中找到package.json文件了。 { "name": "first-puppeteer-scraper-example", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "puppeteer": "^19.6.2" }, "type": "module", "devDependencies": {}, "description": "" }用命令npm init -y初始化package.json 在继续之前，需要确保项目配置项是支持处理 ES6 的。可以在配置项末尾添加"types": "module"。 { "name": "first-puppeteer-scraper-example", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "puppeteer": "^19.6.2" }, "type": "module", "description": "", "types": "module" }启用 ES6 功能的package.json 初始化的最后一步是安装 Peppeteer 库。如下： npm install puppeteer使用命令 npm install 安装 Puppeteer 哇！我们准备一起抓取我们的第一个网站。🤩 如何抓取第一条数据我们将会使用ToScrape 作为学习平台。这个在线沙盒提供了两个专为爬虫而设计的项目。使它成为一个很好的学习数据提取和页面导航的起点。 对于初学者，我们更多的关注 Quotes to Scrape。 如何初始化脚本在项目的根目录中，创建index.js文件。这是我们应用的入口。 为简单起见，我们的脚本包含一个负责获取网站 quotes 的函数(getQuotes)。 在这个函数里，需要执行几个步骤： puppeteer.launch 启动 Puppeteer（实例化用于操作浏览器的browser变量） browser.newPage 打开一个新页面/标签页（实例化用于操作页面的page变量） page.goto 将新页面导航到 http://quotes.toscrape.com/以下是附有注释的初始化脚本： import puppeteer from "puppeteer"; const getQuotes = async () => { // 启动 Puppeteer： // - browser 变量 (`headless: false` - 便于调试，因为能看到浏览器的性温) // - 无默认视窗 (`defaultViewport: null` - 网页将会全屏展示) const browser = await puppeteer.launch({ headless: false, defaultViewport: null, }); // 打开新页面 const page = await browser.newPage(); // 在新页面中： // - 打开网站 "http://quotes.toscrape.com/" // - 等待文档加载完成 (HTML 准备就绪) await page.goto("http://quotes.toscrape.com/", { waitUntil: "domcontentloaded", }); }; // 开始抓取 getQuotes();你觉得运行我们的爬虫会看到什么？用以下命令试试： node index.jsnode index.js 命令启动我们的应用 启动之后能够看到一个新浏览器被启动，并且在新页面加载了 Quotes 网站，神奇吧？🪄
注意： 第一个版本没有关闭浏览器，也就是说需要手动关闭浏览器才能停止应用运行。 如何获取第一个 Quote当你想抓取网站时，需要使用 HTML DOM。我建议通过检查页面查找需要的元素。 这里我们将会一步一步的获取第一个 quote，作者，以及文本内容。 看了页面 HTML 结构后，可以发现一个 quote 被带有类名 quote（class="quote"） 的 元素包裹，这是很重要的信息，因为会用到CSS selectors (如 .quote)来抓取数据。
现在我们有了这些知识，可以回到getQuotes，改进我们的代码，选择第一个 quote 并提取里面的数据。 在page.goto后面添加以下内容： page.evaluate 从页面中提取数据（它将执行一个以页面上下文为入参的函数并将结果返回） document.querySelect获取 quote 的 HTML 节点(将获取并返回第一个带有quote类名的) quote.querySelector从上一步的 quote 节点中获取 quote 文本和作者（获取并返回 .next > a");。将await browser.cllose()注释掉，才能在爬虫打开的浏览器中看到第二页。 这只是为了测试而做的临时改动，getQuotes函数现在应该如下： // 输出 quote console.log(quotes); // 点击 “下一个 按钮 await page.click(".pager > .next > a"); // 关闭浏览器 // await browser.close();如果再次运行我们的爬虫，浏览器就会停留在第二页： Quotes to Scrape 的第二页在点击"下一页"按钮后被下载了 轮到你了！你可以做以下的事情恭喜你完成了使用 Puppeteer 获取数据的介绍！ 👏 现在轮到你来改进这个爬虫了，让它能够获取到 Quotes to Scrape 更多的数据。以下是你可以做的改进： 使用“下一页”按钮导航到所有页面并获取页面上所有的 quote。 获取 quote 的标签（每一个 quote 都有一个标签列表）。 爬取作者介绍页（通过点击作者名字）。 通过标签或者作者对 quote 进行分类（这和爬虫没有 100% 的关联，但却是个很好的改进点）。尽情的发挥创意，做任何你觉得合适的事情🚀 GitHub 上提供了爬虫的代码在 GitHub 上能够查看最终版本的爬虫！你可以随意的保存、fork 或者使用它。 => 第一个 Puppeteer 爬虫 (示例) 成功开始抓取：非常感谢阅读本文！我希望本文能够有效的向你介绍如何使用 JavaScript 和 Puppeteer 进行网络爬取。写这篇网站是一种乐趣，同时也希望你能感受到文章的充实和愉快。 |
【本文地址】