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

ofhr5798 5年前
   <p>JS是个神奇的语言,借助Node.js的后端环境,我们可以进行相应的爬虫开发,如这篇 <a href="/misc/goto?guid=4959722390342254806" rel="nofollow,noindex"> 基于Node.js实现一个小小的爬虫 </a></p>    <p>但搭建后台环境始终略为麻烦,拿到一台新电脑,不用配环境,可不可以直接在浏览器客户端直接实现呢?</p>    <p>可以可以,这里就简单地说一下在浏览器客户端实现的爬虫抓取页面数据</p>    <h2><strong>一、概念理解</strong></h2>    <p>爬虫,简单地说就是发一个请求,然后按一定逻辑解析获取到的数据。</p>    <p>在Node环境下,可以用Request模块请求一个地址,得到返回信息,再用正则匹配数据,或者用Cheerio模块包装-方便定位相关的标签项</p>    <p>在浏览器环境下,也类似,可以用Ajax请求一个地址,得到返回信息,再用正则匹配数据,或者用jQuery模块包装-方便定位相关的标签项</p>    <h2><strong>二、实现</strong></h2>    <p>实现的本质都是打开浏览器的开发者工具,写一段JS代码注入到页面中,然后让相关代码自执行地址请求,再通过代码处理返回的数据</p>    <p>打开Chrome浏览器的开发者工具,选择面板中的 sources  部分,选择二级菜单的  script snippets  部分,然后右键新建一个脚本,在右方输入想注入的代码</p>    <p>然后右键script snippets脚本运行(或者使用快捷键 Ctrl + Enter  运行)就可以开始注入,并可以在下方  console  部分看到相应的结果</p>    <p>注入JS代码的方式是使用一个 script 标签,定义 src 指向的脚本地址,或者在标签中直接定义JS代码</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7535dacca5f154471c3d58c654df643c.png"></p>    <p>在浏览器端的爬虫实现,这里分为 两个方面:一个是处理纯页面的请求,一个是处理Ajax的异步请求</p>    <h3><strong>1. 纯页面</strong></h3>    <p>要在当前页面直接请求一个纯页面,我们可以用 iframe标签辅助,比如我想获取博客园这个分类下的博文信息</p>    <p>找到这个页面的链接 http://www.cnblogs.com/cate/108703/ ,这个博文标题对应的class为  .post_item</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/124678ae329574e80e664ee132cda17a.png"></p>    <p>打开Chrome,在某个页面中,打开开发者工具,在上述说的位置输入这段代码</p>    <pre>  <code class="language-javascript">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);  </code></pre>    <p>代码很简单,直接先通过 iframe 的 src 加载需要的页面,iframe的内容加载成功再插入进行数据解析的逻辑</p>    <p>默认开发者工具是不支持jQuery的,但假如当前页面拥有jQuery,我们就可以直接使用了,如果没有,可以先插入一段引用本地JQ库的代码</p>    <p>如此,已经可以解析到页面内容</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/16a87a9f12e221725bb74e013687502d.png"></p>    <h3><strong>2. Ajax请求</strong></h3>    <p>Ajax的请求处理也类似</p>    <p>在分析页面数据的获取时,有时候会发现数据是通过Ajax的异步JSON来获取的,我们相应的也使用这种异步方式</p>    <p>用原生的Ajax未免代码量太多,可以直接借助JQ的实现</p>    <p>比如这个页面 http://www.ciweishixi.com/forum/ins-407 ,评论数太多,进行了分页。我们想找到包含某些关键字的页,方便定位</p>    <p>这个页面的分页请求是异步请求,所以注入代码进行循环遍历请求,解析返回的JSON数据即可</p>    <pre>  <code class="language-javascript">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);  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9872c3239925b9d0aa46393d24f19d97.png"></p>    <p>至于这个错乱的顺序,是因为Ajax的异步特点,想要按顺序控制请求,可以加入一些 Promise 机制,或者用 Generator 生成器函数来实现一下即可</p>    <p>更多的用法自行去发掘吧</p>    <p> </p>    <p>来自:http://www.cnblogs.com/imwtr/p/6000008.html</p>    <p> </p>