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

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

参考文章

相关推荐
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
吖秧吖2 小时前
three.js 杂记
开发语言·前端·javascript
前端小超超2 小时前
vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
前端·javascript·vue.js
大叔是90后大叔2 小时前
vue3中查找字典列表中某个元素的值
前端·javascript·vue.js
IT大玩客2 小时前
JS如何获取MQTT的主题
开发语言·javascript·ecmascript