一个js爬虫

Posted 2020-07-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个js爬虫相关的知识，希望对你有一定的参考价值。

第一个demo

爬虫采用javascript编写, 下面以糗事百科为例, 来看一下我们的爬虫长什么样子:

var configs = {
    // configs对象的成员domains, scanUrls, contentUrlRegexes和fields
    domains: ["www.qiushibaike.com"],
    scanUrls: ["http://www.qiushibaike.com/"],
    contentUrlRegexes: ["http://www\\\\.qiushibaike\\\\.com/article/\\\\d+"],
    fields: [
        {
            name: "content", // fields成员中第一个field对象的name
            selector: "//*[@id=‘single-next-link‘]", // fields成员中第一个field对象的selector
            required: true // fields成员中第一个field对象的required
        },
        {
            name: "author", // fields成员中第二个field对象的name
            selector: "//div[contains(@class,‘author‘)]//h2" // fields成员中第二个field对象的selector
        }
    ]
};

// 向爬虫任务中添加configs配置，并启动爬虫
var crawler = new Crawler(configs);
crawler.start();

爬虫的整体框架就是这样, 首先定义了一个configs对象, 里面设置了待爬网站的一些信息, 然后通过调用var crawler = new Crawler(configs);和crawler.start();来配置并启动爬虫.

configs对象如何定义, 后面会作详细介绍.

configs详解——之成员

爬虫的整体框架是这样：首先定义了一个configs对象, 里面设置了待爬网站的一些信息, 然后通过调用var crawler = new Crawler(configs);和crawler.start();来配置并启动爬虫.

configs对象中可以定义下面这些成员

domains

定义爬虫爬取哪些域名下的网页, 非域名下的url会被忽略以提高爬取速度

数组类型不能为空

举个栗子:

domains: ["wallstreetcn.com"],
domains: ["zhihu.sogou.com", "zhihu.com"],

scanUrls

定义爬虫的入口链接, 爬虫从这些链接开始爬取,
同时这些链接也是监控爬虫所要监控的链接

数组类型不能为空

举个栗子:

scanUrls: ["http://wallstreetcn.com/news"],
scanUrls: ["http://club2011.auto.163.com/board/biaozhi308/r0a0t0g0bpeo0-n1.html", "http://club2011.auto.163.com/board/fengshen/r0a0t0g0bpeo0-n1.html"],

contentUrlRegexes

定义内容页url的规则
内容页是指包含要爬取内容的网页比如http://www.qiushibaike.com/article/115878724 就是糗事百科的一个内容页

数组类型正则表达式最好填写以提高爬取效率

举个栗子:

contentUrlRegexes: ["http://wallstreetcn\\\\.com/node/\\\\d+"],
contentUrlRegexes: ["http://club2011\\\\.auto\\\\.163\\\\.com/post/\\\\d+\\\\.html.*"],

特别需要注意的是，正则表达式中.和?都是需要转义的。

helperUrlRegexes

定义列表页url的规则
对于有列表页的网站, 使用此配置可以大幅提高爬虫的爬取速率
列表页是指包含内容页列表的网页比如http://www.qiushibaike.com/8hr/page/2/?s=4867046 就是糗事百科的一个列表页

数组类型正则表达式

举个栗子:

helperUrlRegexes: ["http://wallstreetcn\\\\.com/news(\\\\?/page=\\\\d+)?"],
helperUrlRegexes: ["http://club2011\\\\.auto\\\\.163\\\\.com/board/biaozhi308/r0a0t0g0bpeo0\\\\-n\\\\d+\\\\.html.*", "http://club2011\\\\.auto\\\\.163\\\\.com/board/fengshen/r0a0t0g0bpeo0\\\\-n\\\\d+\\\\.html.*"],

fields

定义内容页的抽取规则
规则由一个个field组成, 一个field代表一个数据抽取项

数组类型不能为空

举个栗子:

fields: [
    {
        name: "content",
        selector: "//*[@id=‘single-next-link‘]",
        required: true
    },
    {
        name: "author",
        selector: "//div[contains(@class,‘author‘)]//h2"
    }
]

上面的例子从网页中抽取内容和作者, 抽取规则是针对糗事百科的内容页写的

field在configs详解——之field中作详细介绍。

enableProxy

是否使用代理
如果爬取的网站根据IP做了反爬虫, 可以设置此项为true

布尔类型可选设置

举个栗子:

enableProxy: true,

configs详解——之`field`

field定义一个抽取项, 一个field可以定义下面这些东西

name

给此项数据起个变量名
变量名中不能包含.
如果抓取到的数据想要以文章或者问答的形式发布到网站(WeCenter, WordPress, Discuz!等),field的命名请参考两个完整demo中的命名, 否则无法发布成功

String类型不能为空

举个栗子:
给field起了个名字叫question

{
    name: "question",
    selector: "//*[@id=‘zh-question-title‘]/h2"
}

selector

定义抽取规则, 默认使用XPath
如果使用其他类型的, 需要指定selectorType

String类型不能为空

举个栗子:
使用XPath来抽取知乎问答网页的问题，selector的值就是问题的XPath

{
    name: "question",
    selector: "//*[@id=‘zh-question-title‘]/h2"
}

selectorType

抽取规则的类型
目前可用SelectorType.XPath, SelectorType.JsonPath, SelectorType.Regex
默认SelectorType.XPath

枚举类型

栗子1:
selector默认使用XPath

{
    name: "question",
    selector: "//*[@id=‘zh-question-title‘]/h2" // XPath抽取规则
}

栗子2:
selector使用JsonPath，如果内容是Json数据格式，则使用JsonPath抽取数据比较方便

{
    name: "question_answer_content",
    selectorType: SelectorType.JsonPath,
    selector: "$.comment.content", // JsonPath抽取规则
    required: true
}

栗子3:
除了XPath和JsonPath之外，神箭手还支持使用正则表达式来抽取数据

{
    name: "title",
    selectorType: SelectorType.Regex,
    selector: ‘<div\\\\sid=\\\\"page\\\\"><h1>[^\\\\/]+<\\\\/h1>‘ // Regex抽取规则
}

required

定义该field的值是否必须, 默认false
赋值为true的话, 如果该field没有抽取到内容, 该field对应的整条数据都将被丢弃

布尔类型

举个栗子:

{
    name: "article_title",
    selector: "//div[contains(@class,‘location‘)]/text()[3]",
    required: true
}

repeated

定义该field抽取到的内容是否是有多项, 默认false
赋值为true的话, 无论该field是否真的是有多项, 抽取到的结果都是数组结构

布尔类型

举个栗子:
爬取的网页中包含多条评论，所以抽取评论的时候要将repeated赋值为true

{
    name: "comments",
    selector: "//*[@id=‘zh-single-question-page‘]//a[contains(@class,‘zm-item-tag‘)]",
    repeated: true
}

children

为此field定义子项
子项的定义仍然是一个fields结构, 即一个field对象的数组
没错, 这是一个树形结构

数组类型

举个栗子:
抓取知乎问答网页的回答，每个回答爬取了内容，作者，赞同数

{
    name: "answers",
    selector: "//*[@id=\\"zh-question-answer-wrap\\"]/div",
    repeated: true,
    children: [
        {
            name: "content",
            selector: "//div[contains(@class,\\"zm-editable-content\\")]",
            required: true
        },
        {
            name: "author",
            selector: "//a[@class=\\"author-link\\"]"
        },
        {
            name: "agree_count",
            selector: "//button[@class=\\"up\\"]/span[@class=\\"count\\"]"
        }
    ]
}

sourceType

该field的数据源, 默认从当前的网页中抽取数据
选择SourceType.AttachedUrl可以发起一个新的请求, 然后从请求返回的数据中抽取
选择SourceType.UrlContext可以从当前网页的url附加数据中抽取
url附加数据后面会作介绍

枚举类型

attachedUrl

当sourceType设置为SourceType.AttachedUrl时, 定义新请求的url

String类型

举个栗子:
当爬取的网页中某些内容需要异步加载请求时，就需要使用attachedUrl，比如，抓取知乎回答中的评论部分，就是通过AJAX异步请求的数据

{
    name: "comment_id",
    selector: "//div/@data-aid",
},
{
    name: "comments",
    sourceType: SourceType.AttachedUrl,
    // "comments"是从发送"attachedUrl"这个异步请求返回的数据中抽取的
    // "attachedUrl"支持引用上下文中的抓取到的"field", 这里就引用了上面抓取的"comment_id"
    attachedUrl: "https://www.zhihu.com/r/answers/{comment_id}/comments",
    selectorType: SelectorType.JsonPath,
    selector: "$.data",
    repeated: true,
    children: [
        ...
    ]
}

UrlContext

当sourceType赋值为SourceType.UrlContext时, 表示从内容页中的附加数据（是开发者自定义的一段代码，例如，html代码）中抽取数据

String类型

举个栗子:
将自定义数据附加到内容页中，然后再提取到field

var configs = {
    // configs中的其他成员
    ...
    fields: [
        {
            name: "extra_data",
            // 这里是从开发者附加的一段html代码中抽取的数据
            sourceType: SourceType.UrlContext,
            selector: "//span[contains(@class,‘shenjianshou‘)]",
        }
    ]
};

configs.onProcessHelperPage = function(page, content, site) {
    // 定义附加数据
    var extraData = ‘<div><span class="shenjianshou">100</span></div>‘;
    // 将extraData附加到contentUrl对应的网页中，将contentUrl添加到待爬队列中
    site.addUrl(contentUrl, "get", null, extraData);
    ...
    return false;
}

configs详解——之`site`, `page`和`console`

site

site表示当前正在爬取的网站的对象，下面介绍了可以调用的函数

`site.addHeader(key, value)`

一般在beforeCrawl回调函数（在configs详解——之回调函数中会详细描述）中调用, 用来添加一些HTTP请求的Header

@param key Header的key, 如User-Agent,Referer等
@param value Header的值

举个栗子:
Referer是HTTP请求Header的一个属性，http://buluo.qq.com/p/index.html是Referer的值

configs.beforeCrawl = function(site) {
    site.addHeader("Referer", "http://buluo.qq.com/p/index.html");
}

`site.addCookie(key, value)`

一般在beforeCrawl回调函数（在configs详解——之回调函数中会详细描述）中调用, 用来添加一些HTTP请求的Cookie

@param key Cookie的key
@param value Cookie的值

举个栗子:
cookie是由键-值对组成的，BAIDUID是cookie的key，FEE96299191CB0F11954F3A0060FB470:FG=1则是cookie的值

configs.beforeCrawl = function(site) {
    site.addCookie("BAIDUID", "FEE96299191CB0F11954F3A0060FB470:FG=1");
}

`site.addCookies(cookies)`

一般在beforeCrawl回调函数（在configs详解——之回调函数中会详细描述）中调用, 用来添加一些HTTP请求的Cookie

@param cookies 多个Cookie组成的字符串

举个栗子:
cookies是多个cookie的键-值对组成的字符串，用;分隔。BAIDUID和BIDUPSID是cookie的key，FEE96299191CB0F11954F3A0060FB470:FG=1和FEE96299191CB0F11954F3A0060FB470是cookie的值，键-值对用=相连

configs.beforeCrawl = function(site) {
    site.addCookies("BAIDUID=FEE96299191CB0F11954F3A0060FB470:FG=1; BIDUPSID=FEE96299191CB0F11954F3A0060FB470;");
}

`site.addUrl(url, method, data, contextData)`

一般在onProcessScanPage和onProcessHelperPage回调函数（在configs详解——之回调函数中会详细描述）中调用, 用来往待爬队列中添加url

@param url 待添加的url
@param method 默认为GET请求，也支持POST请求
@param data 发送请求时需添加的参数，可以为空
@param contextData 此url附加的数据, 可以为空

栗子1:

configs.onProcessHelperPage = function(page, content, site) {
    var regex = /https?:\\\\\\/\\\\\\/www\\.jiemian\\.com\\\\\\/article\\\\\\/\\d+\\.html/g;
    var urls = [];
    urls = content.match(regex);
    if (urls != "") {
        for (var i = 0, n = urls.length; i < n; i++) {
            urls[i] = urls[i].replace(/\\\\/g, "");
            // get请求，不需要添加参数，也不需要附加数据
            site.addUrl(urls[i]);
        }
    }
    ...
    return false;
}

栗子2:

configs.onProcessHelperPage = function(page, content, site) {
    ...
    var nextUrl = page.url.replace("page="+currentPage, "page="+page);
    // 定义了发送POST请求所需参数
    var param = new Object();
    param.page = page + "";
    param.size = "18";
    // 标明该请求是POST请求，并添加了所需参数
    site.addUrl(nextUrl, "POST", param);
    return false;
}

`site.requestUrl(url, method, data)`

一般在beforeCrawl, afterDownloadPage, onProcessScanPage和onProcessHelperPage回调函数（在configs详解——之回调函数中会详细描述）中调用, 下载网页, 得到网页内容

@param url 待下载的url
@param method 默认为GET请求，也支持POST请求
@param data 发送请求时需添加的参数，可以为空

举个栗子:

configs.afterDownloadPage = function(page, site) {
    // 定义了发送POST请求所需参数
    var data = new Object();
    data.sno = ‘FK1QPNCEGRYD‘;
    data.CSRFToken = result[1];
    var url = "https://checkcoverage.apple.com/cn/zh/?sn=FK1QPNCEGRYD";
    // 通过发送带参数的POST请求，下载网页，并将网页内容赋值给result
    var result = site.requestUrl(url, "PSOT", data);
    ...
    return page;
}

page

page表示当前正在爬取的网页页面的对象，下面介绍了可以调用的变量和函数

`page.url`

当前正在爬取的网页页面的url

举个栗子:
在afterExtractPage回调函数（在configs详解——之回调函数中会详细描述）中，将url值赋给名叫article_content的field

configs.afterExtractPage = function(page, data) {
    data.article_content = page.url + "";
    return data;
}

`page.raw`

当前网页原始内容

举个栗子:
在onProcessScanPage回调函数（在configs详解——之回调函数中会详细描述）中，通过page.raw得到网页原始内容，然后转换成Json对象

configs.onProcessScanPage = function(page, content, site) {
    var jsonObj = JSON.parse(page.raw);
    ...
    return false;
}

`page.skip(fieldName)`

一般在afterExtractField回调函数（在configs详解——之回调函数中会详细描述）中使用, 用来忽略当前网页的抽取结果或当前上下文的一条结果

@param fieldName 根据fieldName来确定忽略范围，可以为空。当为空时，忽略当前网页的抽取结果

栗子1:
例如爬取知乎问答的时候, 想只爬取话题中包含经济学的问答, 可以这样过滤:

configs.afterExtractField = function(fieldName, data) {
    if (fieldName == "topics") { // fieldName是topics
        if (data.indexOf("经济学") == -1) { // data中不包含"经济学"
            page.skip(); // 跳过当前爬取的网页
        }
    }
    return data;
}

栗子2:
例如爬取知乎问答的时候, 想要只爬取赞同数大于10的回答, 可以这样过滤:

configs = {
    // configs中的其他成员
    ...
    fields: [
        {
            name: "answers",
            selector: "//*[@id=\\"zh-question-answer-wrap\\"]/div",
            repeated: true,
            children: [
                {
                    name: "agree_count",
                    selector: "//button[@class=\\"up\\"]/span[@class=\\"count\\"]"
                },
                ...
            ]
        }
    ]
};
configs.afterExtractField = function(fieldName, data, page) {
    if (fieldName == "answers.agree_count") { // fieldName是answers数组中的agree_count元素名
        if (parseInt(data) < 10) { // 回答的点赞数小于10
            page.skip("answers"); // 跳过这个回答
        }
    }
    return data;
}

console

console对象提供不同级别的日志打印

`console.log(message)`

打印日志, 调试时使用

举个栗子:

  console.log("测试log日志");

`console.debug(message)`

打印出错级别日志, 调试时使用

举个栗子:

  console.debug("正在提取文章标题数据");

`console.info(message)`

打印普通日志

举个栗子:

  console.info("成功处理一个页面");

`console.warn(message)`

打印警告情况的日志

举个栗子:

  console.warn("XX文件解析失败");

`console.error(message)`

打印错误情况的日志

举个栗子:

  console.error("XPath错误");

configs详解——之回调函数

回调函数是在爬虫爬取并处理网页的过程中设置的一些系统钩子, 通过这些钩子可以完成一些特殊的处理逻辑.

回调函数需要设置到configs参数里面才起作用

下图是神箭手云爬虫爬取并处理网页的流程图，矩形方框中标识了爬虫运行过程中所使用的重要回调函数：技术分享

`beforeCrawl(site)`

爬虫初始化时调用, 用来指定一些爬取前的操作

@param site 当前正在爬取的网站的对象

在函数中可以调用site.addHeader(key, value), site.addCookie(key, value)，site.addCookies(cookies)等

举个栗子:
在爬虫开始爬取之前给所有待爬网页添加一个Header

configs.beforeCrawl = function(site) {
    site.addHeader("Referer", "http://buluo.qq.com/p/index.html");
}

`isAntiSpider(url, content)`

判断当前网页是否被反爬虫了, 需要开发者实现

@param url 当前网页的url
@param content 当前网页内容
@return 如果被反爬虫了, 返回true, 否则返回false

举个栗子:

configs.isAntiSpider = function(url, content) {
    if (content.indexOf("404页面不存在") > -1) { // content中包含"404页面不存在"字符串
      return true; // 返回当前网页被反爬虫了
    }
    return false;
}

`afterDownloadPage(page, site)`

在一个网页下载完成之后调用. 主要用来对下载的网页进行处理.

@param page 当前下载的网页页面的对象，调用page.url可获取当前网页的url，调用page.raw可获取当前网页内容
@param site 当前正在爬取的网站的对象
@return 返回处理后的网页

举个栗子:
比如下载了某个网页，希望向网页的body中添加html标签，处理过程如下：

configs.afterDownloadPage = function(page, site) {
    var pageHtml = "<div id=\\"comment-pages\\"><span>5</span></div>";
    var index = page.raw.indexOf("</body>");
    page.raw = page.raw.substring(0, index) + pageHtml + page.raw.substring(index);
    return page;
}

`onProcessScanPage(page, content, site)`

在爬取到入口url的内容之后, 添加新的url到待爬队列之前调用. 主要用来发现新的待爬url, 并且能给新发现的url附加数据.

@param page 当前正在爬取的网页页面的对象，调用page.url可获取当前网页的url，调用page.raw可获取当前网页内容，调用page.skip()便不再爬取当前网页
@param content 当前网页内容
@param site 当前正在爬取的网站的对象
@return 返回false表示不需要再从此网页中发现待爬url

此函数中通过调用site.addUrl(url)来添加新的url到待爬队列。

栗子1:
实现这个回调函数并返回false，表示爬虫在处理这个scanUrl的时候，不会从中提取待爬url

configs.onProcessScanPage = function(page, content, site) {
    return false;
}

栗子2:
生成一个新的url添加到待爬队列中，并通知爬虫不再从当前网页中发现待爬url

configs.onProcessScanPage = function(page, content, site) {
    var jsonObj = JSON.parse(page.raw);
    for (var i = 0, n = jsonObj.data.length; i < n; i++) {
        var item = jsonObj.data[i];
        var lastid = item._id;
        // 生成一个新的url
        var url = page.url + lastid;
        // 将新的url插入待爬队列中
        site.addUrl(url);
    }
    // 通知爬虫不再从当前网页中发现待爬url
    return false;
}

`onProcessHelperPage(page, content, site)`

在爬取到列表页url的内容之后, 添加新的url到待爬队列之前调用. 主要用来发现新的待爬url, 并且能给新发现的url附加数据.

@param page 当前正在爬取的网页页面的对象，调用page.url可获取当前网页的url，调用page.raw可获取当前网页内容，调用page.skip()便不再爬取当前网页
@param content 当前网页内容
@param site 当前正在爬取的网站的对象
@return 返回false表示不需要再从此网页中发现待爬url

此函数中通过调用site.addUrl(url)来添加新的url到待爬队列

栗子1:
实现这个回调函数并返回false，表示爬虫在处理这个helperUrl的时候，不会从中提取待爬url

configs.onProcessHelperPage = function(page, content, site) {
    return false;
}

栗子2:
在onProcessHelperPage回调函数中，生成新的contentUrl并添加到待爬队列中，并通知爬虫不再从当前网页中发现待爬url

configs.onProcessHelperPage = function(page, content, site) {
    var jsonObj = JSON.parse(content);
    var id = 0;
    for (var i = 0, n = jsonObj.data.length; i < n; i++) {
        var item = jsonObj.data[i];
        id = item._id;
        // 将新的url插入待爬队列中
        site.addUrl("http://service.chanjet.com/api/v1/message/"+id);
    }
    // 通知爬虫不再从当前网页中发现待爬url
    return false;
}

`beforeHandleImg(fieldName, img)`

在抽取到field内容之后调用, 对其中包含的img标签进行回调处理

@param fieldName 当前field的name. 注意: 子field的name会带着父field的name, 通过.连接.
@param img 整个img标签的内容
@return 返回处理后的img标签的内容

很多网站对图片作了延迟加载, 这时候就需要在这个函数里面来处理

举个栗子:
汽车之家论坛帖子的图片大部分是延迟加载的，默认会使用http://x.autoimg.cn/club/lazyload.png 图片url，我们需要找到真实的图片url并替换，具体实现如下：

configs.beforeHandleImg = function(fieldName, img) {
    // 通过正则判断img中的src属性是不是真实图片url，如果是，则直接返回img，如果不是，继续执行
    var regex = /src="(https?:\\/\\/.*?)"/;
    var rs = regex.exec(img);
    if (!rs) return img;
    var url = rs[1];
    if (url == "http://x.autoimg.cn/club/lazyload.png") {
        var regex2 = /src9="(https?:\\/\\/.*?)"/;
        rs = regex2.exec(img);
        // 替换成真实图片url
        if (rs) {
            var newUrl = rs[1];
            img = img.replace(url, newUrl);
        }
    }
    return img;
}

`beforeCacheImg(fieldName, url)`

由于很多网站都有图片防盗链限制, 所以神箭手会缓存爬到的图片, 在缓存之前, 可以对图片作处理

@param fieldName 当前field的name. 注意: 子field的name会带着父field的name, 通过.连接.
@param url 图片的url
@return 处理后的图片url

举个栗子:
知乎问答页面, 用户的头像链接是这样的: https://pic3.zhimg.com/xxxxxx_s.jpg
研究一下可以发现, 大一点的头像是这样的: https://pic3.zhimg.com/xxxxxx_l.jpg

configs.beforeCacheImage = function(fieldName, url) {
    if (fieldName == "answers.avatar") {
        return url.replace("_s.jpg", "_l.jpg"); // 对url进行字符串替换，得到较大图片的url
    }
    return url; // 返回图片url
}

`afterExtractField(fieldName, data, page)`

当一个field的内容被抽取到后进行的回调, 在此回调中可以对网页中抽取的内容作进一步处理

@param fieldName 当前field的name. 注意: 子field的name会带着父field的name, 通过.连接.
@param data 当前field抽取到的数据. 如果该field是repeated, data为数组类型, 否则是String
@param page 当前正在爬取的网页页面的对象，调用page.url可获取当前网页的url，调用page.skip()便不再爬取当前网页
@return 返回处理后的数据, 注意数据类型需要跟传进来的data类型匹配

举个栗子:
比如爬取知乎用户的性别信息, 相关网页源码如下:

<span class="item gender" ><i class="icon icon-profile-male"></i></span>

那么可以这样写:

configs = {
    // configs的其他成员
    ...
    fields: [
        {
            name: "gender",
            selector: "//span[contains(@class, ‘gender‘)]/i/@class"
        }
    ]
    ...
};

configs.afterExtractField = function(fieldName, data, page) {
    if (fieldName == "gender") {
        if (data.indexOf("icon-profile-male") > -1) { // data中包含"icon-profile-male"，说明当前知乎用户是男性
            return "男";
        }
        else if (data.indexOf("icon-profile-female") > -1) { // data中包含"icon-profile-female"，说明当前知乎用户是女性
            return "女";
        }
        else { // data未匹配到上面的两个字符串，无法判断用户性别
            return "未知";
        }
    }
    return data;
}

`afterExtractPage(page, data)`

在一个网页的所有field抽取完成之后, 可能需要对field进一步处理, 以发布到自己的网站

@param page 当前正在爬取的网页页面的对象，调用page.url可获取当前网页的url，调用page.skip()便不再爬取当前网页
@param data 当前网页抽取出来的所有field的数据, JavaScript对象
@return 返回处理后的数据, 注意数据类型不能变

举个栗子:
比如从某网页中得到time和title两个field抽取项, 现在希望把time的值添加中括号后拼凑到title中，处理过程如下：

configs.afterExtractPage = function(page, data) {
    var title = "[" + data.time + "] " + data.title;
    data.title = title;
    return data;
}

爬虫进阶开发——之内置函数

本节介绍常用的内置js函数

`extract(data, xpath)`

使用xpath从data中抽取单条数据

@param data html代码片段
@param xpath XPath表达式
@return 返回符合XPath表达式的第一条html元素

举个栗子：
假设data是:

<span class="location item" title="加州"><a href="/topic/19581783" title="加州" class="topic-link" data-token="19581783" data-topicid="10505">加州</a></span>
<span class="business item" title="互联网"><a href="/topic/19550517" title="互联网" class="topic-link" data-token="19550517" data-topicid="99">互联网</a></span>
<span class="item gender"><i class="icon icon-profile-male"></i></span>

执行以下代码：

configs.afterExtractField = function(fieldName, data, page) {
    if (fieldName == "content") {
        data = extract(data, "//a");
    }
    return data;
}

返回的data结果是：

<a href="/topic/19581783" title="加州" class="topic-link" data-token="19581783" data-topicid="10505">加州</a>

`extractList(data, xpath)`

使用xpath从data中抽取多条数据

@param data html代码片段
@param xpath XPath表达式
@return 返回符合XPath表达式的html元素数组

举个栗子：
仍然使用上例中data，执行以下代码：

configs.afterExtractField = function(fieldName, data, page) {
    if (fieldName == "content") {
        var contents = [];
        contents = extractList(data, "//a");
    }
    ...
}

contents数组的内容是：

[‘<a href="/topic/19581783" title="加州" class="topic-link" data-token="19581783" data-topicid="10505">加州</a>‘,
‘<a href="/topic/19550517" title="互联网" class="topic-link" data-token="19550517" data-topicid="99">互联网</a>‘]

`exclude(data, xpath)`

从data中去除符合xpath的html元素

@param data html代码片段
@param xpath 要去除的元素的XPath表达式
@return 返回去除之后的html代码片段

举个栗子：
仍然使用上例中data，执行以下代码：

configs.afterExtractField = function(fieldName, data, page) {
    if (fieldName == "content") {
        data = exclude(data, "//a");
    }
    return data;
}

data的结果是：

<span class="location item" title="加州"></span>
<span class="business item" title="互联网"></span>
<span class="item gender"><i class="icon icon-profile-male"></i></span>

`encodeURI`和`encodeURIComponent`

js自带的这两个函数在处理汉字时有问题, 系统重新定义了这两个函数

`getCaptcha(type, url)`

验证码识别的函数，通过验证码图片获取识别的验证码

@param type 验证码类型，详情见爬虫进阶开发——之验证码识别中的验证码价目表
@param url 验证码图片url
@return 返回Json格式的验证码数据，格式为：{"result":"UNEL","ret":0}（result是识别的验证码结果；ret是返回码，识别成功时值为0，失败时值为非零负数）

举个栗子：
要处理某网站登陆界面的验证码，需调用getCaptcha函数，执行以下代码：

configs.afterDownloadPage = function(page, site) {
    // 验证码图片url
    var url = "https://account.guokr.com/captcha/117654328/";
    // type是52(1-4位不定长数字英文混合)，将得到的验证码Json数据赋值给"imgCaptchaData"
    var imgCaptchaData = getCaptcha(52, url);
    ...
    return page;
};

`getCaptchaFromBase64(type, imgBase64)`

验证码识别的函数，通过Base64编码的验证码图片获取识别的验证码

@param type 验证码类型，详情见爬虫进阶开发——之验证码识别中的验证码识别价目表
@param imgBase64 验证码图片的Base64编码，不包含图片Base64的头:" data:image/jpeg;base64,"
@return 返回Json格式的验证码数据，格式为：{"result":"UNEL","ret":0}（result是识别的验证码结果；ret是返回码，识别成功时值为0，失败时值为非零负数）

举个栗子：
要处理某网站登陆界面Base64编码的验证码图片，需调用getCaptchaFromBase64函数，执行以下代码：

configs.afterDownloadPage = function(page, site) {
    // 验证码图片的Base64编码
    var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQ...";
    // type是53(1-5位不定长数字英文混合)，将得到的验证码Json数据赋值给"imgCaptchaData"
    var imgCaptchaData = getCaptchaFromBase64(53, imgBase64);
    ...
    return page;
};

爬虫进阶开发——之模板化

添加“输入框”

格式如下：

var keywords = "苹果产品,Apple Pay";//@input(keywords, 搜索关键字, 只采集此关键字在zhihu.sogou.com中的搜索结果，多个关键字用逗号分隔)

效果图如下：

技术分享

向输入框中输入的信息，可作为变量的值，比如，根据关键字爬取知乎，可在输入框中输入需爬取的关键字，在爬虫代码中对数据加以处理，即可爬到相应的数据。

添加“选择框”

格式如下：

var filter = true;//@input(filter, 结果过滤, 标题或主题中必须包含搜索关键字)

效果图如下：

技术分享

选择框的信息，可作为判断条件，对数据进行操作，比如，现在要爬取某文章类网站，并添加是否过滤文章图片的功能，就需要将这个变量作为判断依据，并在爬虫代码中对不同情况进行相应处理。

爬虫进阶开发——之图片云托管

当我们需要爬取一个多图网站的时候，最直接的方法是直接爬取网站中的img标签，这种方式常常会导致采集到的图片无法正常显示或显示防盗链图。这种情况，选择图片云托管是最明智的。

那如何使用图片云托管呢？

最简单的方法，在神箭手后台配置爬虫任务的时候，勾选“自动缓存图片”，在任务运行时，就会帮你将采集到的所有图片托管到神箭手云服务器上。但这种方式只能帮你托管后缀名是jpg、jpeg、png和gif的图片。

这样做当然无法满足开发者的需求，为此，我们提供了cacheImg内置函数，目前cacheImg内置函数只能在afterExtractField回调函数中使用，可以处理用户头像、文章封面图和内容中的图片。

举个栗子：
在afterExtractField回调函数中，通过cacheImg函数将非标准的图片url托管到神箭手云服务器上

con

以上是关于一个js爬虫的主要内容，如果未能解决你的问题，请参考以下文章

JS代码片段：一个日期离现在多久了

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

前端开发常用js代码片段

Chrome-Devtools代码片段中的多个JS库

VSCode自定义代码片段——JS中的面向对象编程

JS常用代码片段2-值得收藏

一个js爬虫

第一个demo

configs详解——之成员

domains

scanUrls

contentUrlRegexes

helperUrlRegexes

fields

enableProxy

configs详解——之field

name

selector

selectorType

required

repeated

children

sourceType

attachedUrl

UrlContext

configs详解——之site, page和console

site

site.addHeader(key, value)

site.addCookie(key, value)

site.addCookies(cookies)

site.addUrl(url, method, data, contextData)

site.requestUrl(url, method, data)

page

page.url

page.raw

page.skip(fieldName)

console

console.log(message)

console.debug(message)

console.info(message)

console.warn(message)

console.error(message)

configs详解——之回调函数

beforeCrawl(site)

isAntiSpider(url, content)

afterDownloadPage(page, site)

onProcessScanPage(page, content, site)

onProcessHelperPage(page, content, site)

beforeHandleImg(fieldName, img)

beforeCacheImg(fieldName, url)

afterExtractField(fieldName, data, page)

afterExtractPage(page, data)

爬虫进阶开发——之内置函数

extract(data, xpath)

extractList(data, xpath)

exclude(data, xpath)

encodeURI和encodeURIComponent

getCaptcha(type, url)

getCaptchaFromBase64(type, imgBase64)

爬虫进阶开发——之模板化

添加“输入框”

添加“选择框”

爬虫进阶开发——之图片云托管

那如何使用图片云托管呢？

configs详解——之`field`

configs详解——之`site`, `page`和`console`

`site.addHeader(key, value)`

`site.addCookie(key, value)`

`site.addCookies(cookies)`

`site.addUrl(url, method, data, contextData)`

`site.requestUrl(url, method, data)`

`page.url`

`page.raw`

`page.skip(fieldName)`

`console.log(message)`

`console.debug(message)`

`console.info(message)`

`console.warn(message)`

`console.error(message)`

`beforeCrawl(site)`

`isAntiSpider(url, content)`

`afterDownloadPage(page, site)`

`onProcessScanPage(page, content, site)`

`onProcessHelperPage(page, content, site)`

`beforeHandleImg(fieldName, img)`

`beforeCacheImg(fieldName, url)`

`afterExtractField(fieldName, data, page)`

`afterExtractPage(page, data)`

`extract(data, xpath)`

`extractList(data, xpath)`

`exclude(data, xpath)`

`encodeURI`和`encodeURIComponent`

`getCaptcha(type, url)`

`getCaptchaFromBase64(type, imgBase64)`