使用Node.js 抓取网页内容

很长时间以来，我尝试使用后端语言来抓取网页，比如Java，PHP。后端语言开发纯粹，也很方便，但是有时候内容不可见。我开始使用Node.js来抓取页面。
 
准备工作
 
我们需要准备三个包来完成这个任务：
 
Axios（https://github.com/axios/axios）：一个基于Promise的浏览器以及Node.js的HTTP客户端，我们将用它来抓取网站的HTML网页。
 
Cheerio（https://github.com/cheeriojs/cheerio）：一个类似于服务器端JQuery的包。我们将用它分析和过滤从Axios抓取来的内容。
 
 
fs（https://nodejs.org/api/fs.html）是一个Node.js模块，我们用它来获取内容并写入到JSON文件中。
 
接下来，我们开始设置项目。
 
第一步，先创建一个文件夹。在终端中使用 cd 命令进入这个文件夹。
 
接下来初始化该项目：
 
npm init
 
按照提示的内容操作，可以直接按回车。最后输入yes，会在本目录下创建一个package.json的配置文件。
 
接下来，我们安装上面列表中的两个包。
 
npm install –save axios cheerio
 
fs模块已经是node.js的一部分，我们不需要安装。上述命令完成后，我们会看到上面的两个安装包已经在node_modules目录，它们也列在package.json文件中了。
 
从dev.to网站抓取内容
 
这个网站个人资料在以下网址，如https://dev.to/。我们的任务是抓取到我们写的文章内容，并把它保存到JSON文件中。如下所示：
 

 
 
接下在，在我们的项目文件中创建一个JavaScript文件。如果你愿意，可以叫devtoList.js。
 
接下来需要我们安装软件包:
 
let axios = require(‘axios’);
let cheerio = require(‘cheerio’);
let fs = require(‘fs’);
 
现在，我们开始抓取dev.to的内容:
 
axios.get(“https://dev.to/aurelkurtula");
.then(response) => {
if(response.status === 200){
const html = response.data;
const $ = cheerio.load(html);
}
 
 
},(error) => console.log(err) );
 
 
其中，在第一行我们从指定的URL中获取内容。axios是基于promise的，then检查响应是否正确，然后再开始抓取数据。
 
此时，我们使用控制台来查看 response.data 的内容，会看到来自这个URL的HTML标记，然后我们把这个HTML加载到cheerio。为了把问题解决好，我们用了硬编码的HTML来替代了 response.data 。
 
const html = ‘I have a bunch of questions on how to behave when contributing to open source‘
 
const h3 = cheerio.load(html)
console.log(h3.text())
 
这将返回没有h3标签的字符串。
 
筛选内容
 
到了这点，我们可以在抓取网站的同时找到控制台，找到区无想要的内容。如下源代码：
 

 
 
从上面的HTML中，我们看到文章正文CSS类有 single-article，标题使用了H3，文章标签放在tags的CSS类中。
 
接下来我们开始抓取。
 
axios.get(‘https://dev.to/aurekurtula’)
.then((response) => {
if(reponse.status === 2000){
const html = response.data;
const $ = cheerio.load(html);
let devtoList = [];
$(‘.single-article’).each(function(i,elem){
devtoList[i] = {
title: $(this).find(‘h3’).text().trim();
url:$(this).children(‘.index-article-link’).attr(‘href’),
tags:$(this).find(‘.tags’).text().split(‘#’)
.map(tag => tag.trim())
.filter(function(n){return n != “”})
 
}
});
}
},(error) => console.log(err));
 
以上的代码应该很好读，可以辅助参考上面的HTML源代码截图会更好理解。我们通过.single-article类取了每个.single-article节点。然后我们找到唯一的H3，从其中取得文字，然后使用trim()去掉冗余空格。我们从相关的锚标签中取得超链接。
 
获取文章的tags也很方便。我们把它们全部视为一个字符串（#tag1 #tag2 #tag3），然后把该字符串以#为界转换成一个数组。最后，我们再map数组的每个值用来去掉多余的空格，为了安全，我们过滤掉全部空格。
 
 
我们在循环体外部声明一个空数组。
let devtoList = []
这样我们可以循环体内部去向这个数组中添加数据。
 
于是，devtoList数组对象就包含了我们从网站上获取的数据。现在我们想把这些数据保存到一个JSON文件中，以便我们在任何地方可以使用。如下代码：
 
axios.get(‘https://dev.to/aurelkurtula’)
.then((response) => {
if(resonse.status === 200){
const html = reponse.data;
const $ = cheerio.load(html);
let devtoList = [];
$(‘.single-article’).each(function(i,elem){
devtoList[i] = {
title: $(this).find(‘h3’).text.trim();
url: $(this).children(‘.index-article-link’).attr(‘href’),
tags:$(this).find(‘.tags’).text().split(‘#’)
.map(tag => tag.trim())
.filter(function(n){return n != “”})
}
});
const devtoListTrimmed = devtoList.filter(n => n != undefined)
fs.writeFile(‘devtoList.json’),
JSON.stringify(devtoListTrimmed,null,4),
(err)=> console.log(‘File successfully written!’))
}
},(error) => console.log(err));
 
之前的devtoList数组对象可能包含空值，需要把它们筛选出去，然后使用fs模块写到devtoList.json文件中，这些内容是将数组对象转换为JSON。
 
这一切都是我们需要的。
 
本文相关源代码可以移步到：https://github.com/aurelkurtula/web-scraping来下载。我还在IMDB中抓取了Googlereads和movies的电子书，可以参考bookList和movieList.js文件。这些代码均在同一个GitHub地址。
 
 

作者：aurel kurtula 
编译：亢小龙
原文：https://dev.to/aurelkurtula/in … s-9h2