如何从 response.body 获取节点中“<img src=''>”的绝对路径

Question

所以我想使用request-promise来拉取一个页面的body。获得页面后，我想收集所有标签并获取这些图像的 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

看起来您正在使用 jQuery，所以您可以

$('img').each(function(i, e) {
    console.log(e.src)
});

如果您使用 src，它会将相对路径扩展为绝对路径。

Answer 2

将您的页面 URL 存储为变量，使用 url.resolve 将各个部分连接在一起。在 Node REPL 中，这适用于相对路径和绝对路径（因此 "resolving"）：

$:~/Projects/test$ node
> var base = "https://www.google.com";
undefined
> var imageSrc = "/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp.gif";
undefined
> var url = require('url');
undefined
> url.resolve(base, imageSrc);
'https://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp.gif'
> imageSrc = base + imageSrc;
'https://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp.gif'
> url.resolve(base, imageSrc);
'https://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp.gif'

您的代码将更改为：

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) {
    $ = cheerio.load(response.body);
    var relativeLinks = $("img");
    relativeLinks.each( function() {
        var link = $(this).attr('src');
        var fullImagePath = url.resolve(base, link); // should be absolute 
        console.log(link);
        if (link.startsWith('http')){
            console.log('abs');
        }
        else {
            console.log('rel');
        }
   });
});

Answer 3

要在您的方案中获取图像链接数组，您可以使用 url.resolve 来解析带有请求 URL 的 img 标签的相对 src 属性，结果绝对 URL。数组传递给最后的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 将适用于绝对或相对 URLs（它解析 returns 组合绝对 URL 当解析您的请求 URL到相对路径，但是当从您的请求 URL 解析为绝对 URL 时，它只是 returns 绝对 URL）。例如，在 google 上使用 img 标签，将 /logos/cat.gif 和 https://test.com/dog.gif 作为 src 属性，这将输出：

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

如何从 response.body 获取节点中“<img src=''>”的绝对路径

How do I get the absolute path for '<img src=''>' in node from the a response.body

html

javascript

node.js

cheerio