在浏览器客户端进行爬虫开发

JS是个神奇的语言,借助Node.js的后端环境,我们可以进行相应的爬虫开发,如这篇 基于Node.js实现一个小小的爬虫 但搭建后台环境始终略为麻烦,拿到一台新电脑,不用配环境,可不可以直接在浏览器客户端直接实现呢? 可以可以,这里就简单地说一下在浏览器客户端实现的爬虫抓取页面数据

一、概念理解

爬虫,简单地说就是发一个请求,然后按一定逻辑解析获取到的数据。

在Node环境下,可以用Request模块请求一个地址,得到返回信息,再用正则匹配数据,或者用Cheerio模块包装-方便定位相关的标签项

在浏览器环境下,也类似,可以用标签的src属性或Ajax请求一个地址,得到返回信息,再用正则匹配数据,或者用jQuery模块包装-方便定位相关的标签项

二、实现

实现的本质都是打开浏览器的开发者工具,写一段JS代码注入到页面中,然后让相关代码自执行地址请求,再通过代码处理返回的数据

打开Chrome浏览器的开发者工具,选择面板中的 sources 部分,选择二级菜单的 script snippets 部分,然后右键新建一个脚本,在右方输入想注入的代码

然后右键script snippets脚本运行(或者使用快捷键 Ctrl + Enter 运行)就可以开始注入,并可以在下方 console 部分看到相应的结果

注入JS代码的方式是使用一个script标签,定义src指向的脚本地址,或者在标签中直接定义JS代码

在浏览器端的爬虫实现,这里分为两个方面:一个是处理纯页面的请求,一个是处理Ajax的异步请求

1. 纯页面

要在当前页面直接请求一个纯页面,我们可以用 iframe 标签辅助,比如我想获取博客园这个分类下的博文信息

找到这个页面的链接 http://www.cnblogs.com/cate/108703/,这个博文标题对应的class为 .post_item

打开Chrome,在某个页面中,打开开发者工具,在上述说的位置输入这段代码

var script = document.createElement('script');
script.type = 'text/javascript';

var iframe = document.createElement('iframe');

// 使用到了ES6的新字符串,方便看代码
var script_code = `
    var doc = document.getElementById('my_iframe').contentWindow.document;
    console.log($(doc).find('.post_item').length);
`;

// 插入代码
function insertMyScript() {
    script.appendChild(document.createTextNode(script_code));
    document.body.appendChild(script);
}


iframe.src = 'http://www.cnblogs.com/cate/108703/';
iframe.id = 'my_iframe';
iframe.onload = function() {
    insertMyScript();
};
document.body.appendChild(iframe);

代码很简单,直接先通过iframe的src加载需要的页面,iframe的内容加载成功再插入进行数据解析的逻辑

默认开发者工具是不支持jQuery的,但假如当前页面拥有jQuery,我们就可以直接使用了,如果没有,可以先插入一段引用本地JQ库的代码

如此,已经可以解析到页面内容

2. Ajax请求

Ajax的请求处理也类似

在分析页面数据的获取时,有时候会发现数据是通过Ajax的异步JSON来获取的,我们相应的也使用这种异步方式

用原生的Ajax未免代码量太多,可以直接借助JQ的实现

比如这个页面http://www.ciweishixi.com/forum/ins-407,评论数太多,进行了分页。我们想找到包含某些关键字的页,方便定位

这个页面的分页请求是异步请求,所以注入代码进行循环遍历请求,解析返回的JSON数据即可

var script = document.createElement('script');
script.type = 'text/javascript';

var script_code = `
    var url = 'http://www.ciweishixi.com/forum/comm-407-',
        keyWords = '广州';

    for (var i = 1; i < 200; ++i) {
        (function(_i) {
            $.ajax({
                url: url + _i,
                type: 'post',
                success: function(re) {
                    var str = 'Searching page ' + _i;
                    if (re.indexOf(keyWords) !== -1) {
                        str += ': found !';
                    }
                    console.log(str);
                },
                error: function(e) {
                    console.log(e);
                }
            });
        })(i);
    }

    
    
`;

script.appendChild(document.createTextNode(script_code));
document.body.appendChild(script);

至于这个错乱的顺序,是因为Ajax的异步特点,想要按顺序控制请求,可以加入一些Promise机制,或者用Generator生成器函数来实现一下即可

更多的用法自行去发掘吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

干货-GitHub 使用中的一些细节

第一次使用 github 的朋友相信都会挺陌生的,因为是纯英文的页面加上不适太熟悉内部的操作,所以一些常规的操作却找不到操作的入口,甚是捉急,本文就几个操作细节...

20330
来自专栏葡萄城控件技术团队

渐进式Web应用(PWA)入门教程(下)

渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的...

10900
来自专栏PHP在线

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是客户端表单验证插件。 Query formValidator表单校验插件支持的验证功能(还有很多功能没有罗...

48890
来自专栏崔庆才的专栏

腾讯云主机Python3环境安装PySpider爬虫框架过程

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速、原生支持各种Web标准:DOM...

1.4K00
来自专栏前端萌媛的成长之路

url、href和src区别

1.4K40
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

50880
来自专栏Jerry的SAP技术分享

ABAP Netweaver和git的快捷方式

我笔记本上有很多github仓库,每次切换仓库,我不想敲很长的cd命令。比如现在我需要手敲下面的命令进入一个Java仓库:

17650
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(一)

一般来说键盘用的越多鼠标用的越少,那么写起代码来效率就越高;常见的快捷键想必大家都已经掌握,接下来我就分享一些你可能不知道的但确非常实用的快捷键。

12440
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

17650
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

10320

扫码关注云+社区

领取腾讯云代金券