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 文件,就能得到所有的签约作者信息和其主页的链接了。

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

参考文章

相关推荐
DevUI团队17 分钟前
解锁前端高阶调试:浏览器/IDE/Git技巧分享
前端·javascript·html
z_mazin27 分钟前
逆向Sora 的 Web 接口包装成了标准的 OpenAI API 格式-系统架构
linux·运维·前端·爬虫·系统架构
CoolerWu28 分钟前
Trae Solo 实战指南:从"会用"到"用好"的协作方法论
前端·javascript
鹏多多37 分钟前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
一颗宁檬不酸42 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..44 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
j***894644 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
语落心生1 小时前
流式数据湖Paimon探秘之旅 (一) Paimon整体架构概览
数据分析
梦里不知身是客111 小时前
帆软的图标类型介绍
python·信息可视化·数据分析
@cc小鱼仔仔1 小时前
vue 知识点
前端·javascript·vue.js