（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);
});

上最终效果图：