如何从response.body中获取节点中'<img rel="nofollow noreferrer" src =''>'的绝对路径

Question

所以我想使用request-promise来拉取页面的主体.一旦我有了页面,我想收集所有标签并获得这些图像的src数组.假设页面上的src属性具有相对路径和绝对路径.我想要一个页面上的imgs绝对路径数组.我知道我可以使用一些字符串操作和npm路径来构建绝对路径,但我想找到一种更好的方法.

var rp = require('request-promise'),
    cheerio = require('cheerio');

var options = {
    uri: 'http://www.google.com',
    method: 'GET',
    resolveWithFullResponse: true
};

rp(options)
  .then (function (response) {
    $ = cheerio.load(response.body);
    var relativeLinks = $("img");
    relativeLinks.each( function() {
        var link = $(this).attr('src');
        console.log(link);
        if (link.startsWith('http')){
            console.log('abs');
        }
        else {
            console.log('rel');
        }
   });
});

结果

  /logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp.gif
  rel

Answer 1

要在您的场景中获取图像链接数组，您可以使用请求 URL 解析标签的url.resolve相对src属性，从而生成绝对 URL。img该数组被传递到最后then；console.log除了需要之外，您还可以对数组执行其他操作。

var rp = require('request-promise'),
    cheerio = require('cheerio'),
    url = require('url'),
    base = 'http://www.google.com';

var options = {
    uri: base,
    method: 'GET',
    resolveWithFullResponse: true
};

rp(options)
    .then (function (response) {
        var $ = cheerio.load(response.body);

        return $('img').map(function () {
            return url.resolve(base, $(this).attr('src'));
        }).toArray();
    })
    .then(console.log);

这url.resolve适用于绝对或相对 URL（当从请求 URL 解析为相对路径时，它会解析并返回组合的绝对 URL，但当从请求 URL 解析为绝对 URL 时，它只返回绝对 URL）。例如，使用imggoogle 上的标签并使用/logos/cat.gif和https://test.com/dog.gif作为src属性，这将输出：

[ 
    'http://www.google.com/logos/cat.gif',
    'https://test.com/dog.gif'
]