當前位置:首頁 > PHP教程 > php應用 > 列表

PHP+HTML+JavaScript+Css實現簡單爬蟲開發

發布:smiling 來源: PHP粉絲網  添加日期:2019-11-06 10:50:55 瀏覽: 評論:0 

開發一個爬蟲,首先你要知道你的這個爬蟲是要用來做什么的。我是要用來去不同網站找特定關鍵字的文章,并獲取它的鏈接,以便我快速閱讀。

按照個人習慣,我首先要寫一個界面,理清下思路。

1、去不同網站。那么我們需要一個url輸入框。

2、找特定關鍵字的文章。那么我們需要一個文章標題輸入框。

3、獲取文章鏈接。那么我們需要一個搜索結果的顯示容器。

  1. <div class="jumbotron" id="mainJumbotron"> 
  2.  
  3.  <div class="panel panel-default"> 
  4.  
  5.   <div class="panel-heading">文章URL抓取</div> 
  6.  
  7.   <div class="panel-body"> 
  8.  
  9.    <div class="form-group"> 
  10.  
  11.     <label for="article_title">文章標題</label> 
  12.  
  13.     <input type="text" class="form-control" id="article_title" placeholder="文章標題"> 
  14.  
  15.    </div> 
  16.  
  17.    <div class="form-group"> 
  18.  
  19.     <label for="website_url">網站URL</label> 
  20.  
  21.     <input type="text" class="form-control" id="website_url" placeholder="網站URL"> 
  22.  
  23.    </div> 
  24.  
  25.    <button type="submit" class="btn btn-default">抓取</button> 
  26.  
  27.   </div> 
  28.  
  29.  </div> 
  30.  
  31.  <div class="panel panel-default"> 
  32.  
  33.   <div class="panel-heading">文章URL</div> 
  34.  
  35.   <div class="panel-body"> 
  36.  
  37.    <h3></h3> 
  38.  
  39.   </div> 
  40.  
  41.  </div> 
  42.  
  43. </div> 

直接上代碼,然后加上自己的一些樣式調整,界面就完成啦:

那么接下來就是功能的實現了,我用PHP來寫,首先第一步就是獲取網站的html代碼,獲取html代碼的方式也有很多,我就不一一介紹了,這里用了curl來獲取,傳入網站url就能得到html代碼啦:

  1. private function get_html($url){ 
  2.  
  3.  $ch = curl_init(); 
  4.  
  5.  $timeout = 10; 
  6.  
  7.  curl_setopt($ch, CURLOPT_URL, $url); 
  8.  
  9.  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
  10.  
  11.  curl_setopt($ch, CURLOPT_ENCODING, 'gzip'); 
  12.  
  13.  curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36'); 
  14.  
  15.  curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); 
  16.  
  17.  $html = curl_exec($ch); 
  18.  
  19.  return $html
  20.  

雖然得到了html代碼,但是很快你會遇到一個問題,那就是編碼問題,這可能讓你下一步的匹配無功而返,我們這里統一把得到的html內容轉為utf8編碼:

  1. $coding = mb_detect_encoding($html); 
  2.  
  3. if ($coding != "UTF-8" || !mb_check_encoding($html"UTF-8")) 
  4.  
  5.  $html = mb_convert_encoding($html'utf-8''GBK,UTF-8,ASCII'); 

得到網站的html,要獲取文章的url,那么下一步就是要匹配該網頁下的所有a標簽,需要用到正則表達式,經過多次測試,最終得到一個比較靠譜的正則表達式,不管a標簽下結構多復雜,只要是a標簽的都不放過:(最關鍵的一步)。

  1. $pattern = '|<a[^>]*>(.*)|isU'
  2.  
  3. preg_match_all($pattern$html$matches); 
  4.  
  5. </a[^> 

匹配的結果在$matches中,它大概是這樣的一個多維素組:

  1. array(2) {  
  2.  
  3.  [0]=>  
  4.  
  5.  array(*) {  
  6.  
  7.   [0]=> 
  8.  
  9.   string(*) "完整的a標簽" 
  10.  
  11.   . 
  12.  
  13.   . 
  14.  
  15.   . 
  16.  
  17.  } 
  18.  
  19.  [1]=> 
  20.  
  21.  array(*) { 
  22.  
  23.   [0]=> 
  24.  
  25.   string(*) "與上面下標相對應的a標簽中的內容" 
  26.  
  27.  } 
  28.  

只要能得到這個數據,其他就完全可以操作啦,你可以遍歷這個素組,找到你想要a標簽,然后獲取a標簽相應的屬性,想怎么操作就怎么操作啦,下面推薦一個類,讓你更方便操作a標簽:

  1. $dom = new DOMDocument(); 
  2.  
  3. @$dom->loadHTML($a);//$a是上面得到的一些a標簽 
  4.  
  5. $url = new DOMXPath($dom); 
  6.  
  7. $hrefs = $url->evaluate('//a'); 
  8.  
  9. for ($i = 0; $i < $hrefs->length; $i++) { 
  10.  
  11.  $href = $hrefs->item($i); 
  12.  
  13.  $url = $href->getAttribute('href'); //這里獲取a標簽的href屬性 
  14.  

當然,這只是一種方式,你也可以通過正則表達式匹配你想要的信息,把數據玩出新花樣。

得到并匹配得出你想要的結果,下一步當然就是傳回前端將他們顯示出來啦,把接口寫好,然后前端用js獲取數據,用jquery動態添加內容顯示出來:

  1. var website_url = '你的接口地址'
  2.  
  3. $.getJSON(website_url,function(data){ 
  4.  
  5.  if(data){ 
  6.  
  7.   if(data.text == ''){ 
  8.  
  9.    $('#article_url').html('<div><p>暫無該文章鏈接</p></div>'); 
  10.  
  11.    return
  12.  
  13.   } 
  14.  
  15.   var string = ''
  16.  
  17.   var list = data.text; 
  18.  
  19.   for (var j in list) { 
  20.  
  21.     var content = list[j].url_content; 
  22.  
  23.     for (var i in content) { 
  24.  
  25.      if (content[i].title != '') { 
  26.  
  27.       string += '<div class="item">' + 
  28.  
  29.        '<em>[<a href="http://' + list[j].website.web_url + '" target="_blank">' + list[j].website.web_name + '</a>]</em>' + 
  30.  
  31.        '<a href=" ' + content[i].url + '" target="_blank" class="web_url">' + content[i].title + '</a>' + 
  32.  
  33.        '</div>'
  34.  
  35.      } 
  36.  
  37.     } 
  38.  
  39.    } 
  40.  
  41.   $('#article_url').html(string); 
  42.  
  43. }); 

以上就是本文的全部內容,希望對大家的學習有所幫助。

Tags: PHP HTML JavaScript

分享到:

天气网首页彩吧