菜鸟学Python累计写了400多篇文章js截取,其中的入门干货非常多。但是技术类文章含有很多代码、公式、图片等,即使爬到了内容阅读体验也很差。如果能整理成电子书该多好啊,可以系统的阅读!想到了万能的Python,于是把我的简书上的“菜鸟学python”进行爬取,效果还不错。

总体思路是获取文章列表和URL、对每篇文章进行滚动截屏、图片处理和拼接、图片转换为pdf、将多个pdf文件进行合并成一个文档并添加标签,由于涉及内容较多决定分两篇文章来进行阐述。

1.爬取列表页课程大纲

1)建立sitemap

使用webscraper前最好把开发者模式调到页面底部,这样看起来方便,按下图所示依次选择web scraper——create new sitemap——create sitemap选项,建立sitemap。

在对应位置输入sitemap名称和起始页URL即可完成创建(下图)

2).选择爬取对象

在这一步要做的主要就是选择爬取目标,与我们自己写爬虫时用的选择器功能类似。对本次任务来说,我们只需要获取文章名称、文章URL和发布时间(发布时间主要用于文章排序和筛选)。

点击“add new selector”按钮新建选择器,下图中的ID是选择器名称,Type是要取的数据类型,比如text、link等等。

js正则截取字符串_js截取_js 截取字符串 正则

之后就可以在刚才选定的element的基础上选择目标数据了,因为文章标题、URL、发布时间三项数据的获取方式基本相同,我们仅以文章标题为例进行演示:

补充一点关于selector选择的技巧:在点击select按键后会出现一个显示栏,通常使用鼠标选择目标元素然后点击Done selecting按钮即可。

但是有些目标元素自带页面跳转功能js截取,这时可以勾选显示栏中的Enable key选项,显示栏会变成下图中的样子,之后就可以使用快捷键(SPC)进行元素选择了。

js 截取字符串 正则_js截取_js正则截取字符串

3).爬取数据

在爬取数据之前,我们可以进入sitemap (name)下的selector graph页面,在这里可以比较直观地看到选择器的结构,如果爬虫层次比较多、结构比较复杂,为了避免不必要的错误,爬取前可以通过这种方式进行检查。

js 截取字符串 正则_js截取_js正则截取字符串

现在我们正式开始爬取数据,进入sitemap (name)下的scrape页面,设置访问和页面加载延时(下图),点击start scraping开始爬取。

js 截取字符串 正则_js正则截取字符串_js截取

由于数据量很小,爬取工作几秒钟就能完成,结果如下,可以通过sitemap (name)下的export data as CSV选项将数据以csv文件格式导出。不过webscraper获取到的数据是乱序的,因此我们才需要获取文章的发布时间,并以此为依据进行排序。

2.使用selenium进行页面截图

1).获取文章列表

在这一步需要获取文章名列表和文章地址列表,其中文章名称用于设置文件名、建立标签(后面会讲到),文章地址用于访问文章的详情页。通过pandas可以很方便地从csv文件中获取相关信息,代码如下:

js正则截取字符串_js 截取字符串 正则_js截取

由于当本年度发表的文章其发布时间一栏没有年份,所以在数据清洗的时候要进行补全,之后才能按时间顺序对数据进行排序;另外有些文章名中含有“|”、“:”这种无法作为文件名的字符,需要去掉;在这一步还可以对文章进行筛选,比如可以只选择发表时间为2018年的文章。

2).文章页截图

说起网页截图不得不提PhantomJS,可惜它对JS的支持不够好,有时候会出现取不到真实数据的问题,所以我们还是使用Chrome。Chrome最大的问题是不支持截长图,只能采用逐一截取当前显示区域图片再拼接的方式获取文章内容。

文章内容元素的高度在selenium中可以使用选定元素的size属性来获取,而当前窗口的显示高度只能通过JS代码来获取,幸运的是selenium的execute_script方法允许python执行给定的JS指令,这种方法同样可以用于页面翻动操作,具体代码如下:

js截取_js 截取字符串 正则_js正则截取字符串

需要注意的是,execute_script执行的js代码和主线程代码是同步运行的,为了保证程序同步可以加一个小小的延时。接下来写一个入口函数,获取文章列表并为每篇文章建立独立文件夹,然后进行滚动截图,截取的图片保存到相应的文件夹内。

来看几张截取到的图片,可以发现每张图的顶部都飘着一条简书的“横幅”,不但影响阅读体验,还遮挡住了一部分文章内容。

3).截图优化

发现问题就要改正问题,简书页面顶部的“横幅”栏是最初没有考虑到的,为了防止文章内容被遮挡,需要调整页面每次翻动的步长,通过减小每次翻动的距离来防止未截图的内容被遮挡,顶部栏元素的高度获取方式与文章内容元素的获取方式相同。直接来看改动后的代码:

js截取_js 截取字符串 正则_js正则截取字符串

上面的代码不但获取了页面顶部栏的高度,还顺便获取了文章两侧的空白宽度,这个参数可以用于将文章内容两侧多余的部分去除,可以说是为后期的图片处理做的准备。

由于篇幅较长,本次分享就到这里,关于图片的后期处理以及pdf文档的建立、整合等内容下次继续分享。

近100个公司的180名Python小伙伴

都在Python工作圈

近期热门:

限时特惠:本站每日持续更新海量设计资源,一年会员只需29.9元,全站资源免费下载
站长微信:ziyuanshu688