pupeteer 抓取签约作者数据,看看大佬们都在写啥(一)

大家好,我是枫哥,最近一直在持续更文,打算冲一波到 4 级。也想看看写文章是否有啥能变现的手段,然后了解到掘金是有签约作者的,于是乎便去看了一下成为签约作者的条件,掘金站内的粉丝要大于 3000,对于我这种只有两位数粉丝的新手而言,有点遥不可及了。

然后我就想着是什么样的存在才能有这么多粉丝,就找到了一篇之前掘金酱发送的社区签约计划名单,就是这篇:juejin.cn/post/732801...,心里一想,他们到底有啥特点?或者写作方向、内容上有什么相同点?就萌发了一个想把这些签约作者的历史文章来做一次简单数据分析的想法,第一步,自然是要把数据爬下来了,本篇文章就记录一下爬取思路和过程。

初始化项目

shell 复制代码
mkdir author-analyze
cd author-analyze
npm init -y
npm i puppeteer --save

按照国际惯例,抓取 baidu试一下效果如何

新建一个 index.js文件,加入下面的代码,访问百度,然后截图保存到本地

javascript 复制代码
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  await page.screenshot({path: 'baidu.png'});
  await browser.close();
})();

代码很简单,就不过多啰嗦了,执行完成后,应该就能看到在当前目录下生成了一张 baidu.png的图片了

正式开工

javascript 复制代码
const puppeteer = require('puppeteer');
const fs = require('fs');

// 要抓取的目标网站
const targetUrl =
  'https://juejin.cn/post/7328012551756464139?searchId=20240419171627F6993F8F83DA9D862954';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(targetUrl);
  const content = await page.content();
  fs.writeFileSync('./index.html', content);
  await browser.close();
})();

可以把保存的 index.html打开看一下,应该不出意外的话,应该就抓取成功了~

解析页面元素

这里我们使用 cheerio 来解析抓取到的 html 页面内容。简单介绍一些 cheerio,它是一个快速、灵活、且优雅的用于解析和操作 html 和 xml 的 js 库。语法和 jquery 有点类似,使用起来也很简单,中文网地址:cheerio.nodejs.cn/

我们首先在本地来安装 cheerio 库

shell 复制代码
npm i cheerio --save

接下来我们分析一下页面的 dom 结构,不难发现,名单就是使用 table 绘制的,所以我们要做的就是解析页面中所有的 table,然后提取出每行、列的字段,然后获取到的数据保存到 json 中,以备后续数据分析使用。话不多说,直接上代码,比较简单,有疑问的可以在评论区留言。

javascript 复制代码
const $ = cheerio.load(content);

const table = $('table');
const rows = table.find('tr');

const result = Array.from(rows).reduce((result, row) => {
	const columns = $(row).find('td');
	const user = Array.from(columns).map((el) => {
		const a = $(el).find('a');
		return a.length ? a.attr('href') : el.children[0].data;
	});
	if (user.length) {
		result.push(user);
	}
	return result;
}, []);

fs.writeFileSync('result.json', JSON.stringify(result));

写好后,我们再来执行一下这个 js 文件,就能得到所有的签约作者信息和其主页的链接了。

这篇文章就先到这里了,下一篇我们来遍历所有的作者,获取他们的历史文章标题来进行一下数据分析,敬请期待。如果想要本篇文章源码的小伙伴,可以关注公众号:极客枫哥,回复:掘金签约作者

参考文章

相关推荐
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
爬虫程序猿3 小时前
《京东商品详情爬取实战指南》
爬虫·python
一只小风华~3 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱3 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.4 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊5 小时前
state和ref
前端·javascript·react.js
GEO_YScsn5 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing5 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_5 小时前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠5 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript