（PHP+HTML+JavaScript+Css）一個簡單爬蟲的開發

    開發一個爬蟲，首先你要知道你的這個爬蟲是要用來作什麼的。我是要用來去不一樣網站找特定關鍵字的文章，並獲取它的連接，以便我快速閱讀。

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

    一、去不一樣網站。那麼咱們須要一個url輸入框。

    二、找特定關鍵字的文章。那麼咱們須要一個文章標題輸入框。

    三、獲取文章連接。那麼咱們須要一個搜索結果的顯示容器。

<div class="jumbotron" id="mainJumbotron">
    <div class="panel panel-default">

        <div class="panel-heading">文章URL抓取</div>

        <div class="panel-body">
            <div class="form-group">
                <label for="article_title">文章標題</label>
                <input type="text" class="form-control" id="article_title" placeholder="文章標題">
            </div>
            <div class="form-group">
                <label for="website_url">網站URL</label>
                <input type="text" class="form-control" id="website_url" placeholder="網站URL">
            </div>

            <button type="submit" class="btn btn-default">抓取</button>
        </div>
    </div>
    <div class="panel panel-default">

        <div class="panel-heading">文章URL</div>

        <div class="panel-body">
            <h3></h3>
        </div>
    </div>
</div>

直接上代碼，而後加上本身的一些樣式調整，界面就完成啦：

那麼接下來就是功能的實現了，我用PHP來寫，首先第一步就是獲取網站的html代碼，獲取html代碼的方式也有不少，我就不一一介紹了，這裏用了curl來獲取，傳入網站url就能獲得html代碼啦：

private function get_html($url){

    $ch = curl_init();

    $timeout = 10;

    curl_setopt($ch, CURLOPT_URL, $url);

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    curl_setopt($ch, CURLOPT_ENCODING, 'gzip');

    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');

    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

    $html = curl_exec($ch);

    return $html;

}

雖然獲得了html代碼，可是很快你會遇到一個問題，那就是編碼問題，這可能讓你下一步的匹配無功而返，咱們這裏統一把獲得的html內容轉爲utf8編碼：

$coding = mb_detect_encoding($html);

if ($coding != "UTF-8" || !mb_check_encoding($html, "UTF-8"))

    $html = mb_convert_encoding($html, 'utf-8', 'GBK,UTF-8,ASCII');

獲得網站的html，要獲取文章的url，那麼下一步就是要匹配該網頁下的全部a標籤，須要用到正則表達式，通過屢次測試，最終獲得一個比較靠譜的正則表達式，無論a標籤下結構多複雜，只要是a標籤的都不放過：(最關鍵的一步)

$pattern = '|<a[^>]*>(.*)</a>|isU';

preg_match_all($pattern, $html, $matches);

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

array(2) {  
    [0]=>  
    array(*) {    
        [0]=>
        string(*) "完整的a標籤"
        .
        .
        .
    }
    [1]=>
    array(*) {
        [0]=>
        string(*) "與上面下標相對應的a標籤中的內容"
    }
}

只要能獲得這個數據，其餘就徹底能夠操做啦，你能夠遍歷這個素組，找到你想要a標籤，而後獲取a標籤相應的屬性，想怎麼操做就怎麼操做啦，下面推薦一個類，讓你更方便操做a標籤：

$dom = new DOMDocument();

@$dom->loadHTML($a);//$a是上面獲得的一些a標籤

$url = new DOMXPath($dom);

$hrefs = $url->evaluate('//a');

for ($i = 0; $i < $hrefs->length; $i++) {

    $href = $hrefs->item($i);

    $url = $href->getAttribute('href'); //這裏獲取a標籤的href屬性

}

固然，這只是一種方式，你也能夠經過正則表達式匹配你想要的信息，把數據玩出新花樣。

獲得並匹配得出你想要的結果，下一步固然就是傳回前端將他們顯示出來啦，把接口寫好，而後前端用js獲取數據，用jquery動態添加內容顯示出來：

var website_url = '你的接口地址';
$.getJSON(website_url,function(data){
    if(data){
        if(data.text == ''){
            $('#article_url').html('<div><p>暫無該文章連接</p></div>');
            return;
        }
        var string = '';
        var list = data.text;
        for (var j in list) {
                var content = list[j].url_content;
                for (var i in content) {
                    if (content[i].title != '') {
                        string += '<div class="item">' +
                            '<em>[<a href="http://' + list[j].website.web_url + '" target="_blank">' + list[j].website.web_name + '</a>]</em>' +
                            '<a href=" ' + content[i].url + '" target="_blank" class="web_url">' + content[i].title + '</a>' +
                            '</div>';
                    }
                }
            }
        $('#article_url').html(string);
});

上最終效果圖：