Question

我正在构建一个Google Chrome扩展程序，用于向我的书签应用添加新书签。

我的书签应用程序的一个功能是允许保存网页的截图图像和最多3个附加图像。

在Chrome扩展程序中，另外3张图片显示为插入图片网址的文字输入。

在每个输入下，我抓取了网页HTML以查找页面中的所有图像，并在带有上一个和下一个箭头按钮的滑块中显示它们以旋转并查看页面上的所有图像。如果用户喜欢页面上的其中一个图像，他们可以在此滑块中选择它，然后将图像转换为Base64编码的字符串并上传到我的远程书签应用服务器。

我的问题是，在我从网页显示图像的图像选择器中，它显示了页面中任何图像的断开图像，并且是用相对路径而不是带有域名的完整路径链接的在它。

（下面这个动画GIF的4张图片中显示的最后一张图片显示第4张图像是破碎的图像）

如果我查看页面源并查看这样的相对链接图像......

然后此图像将在我的图片选择器/滑块中显示为我的扩展中的图像，因为它将链接到这样的图像，其中相对链接的图像最终获得前面的扩展URL ... < / p>

下面是我的JavaScript函数，它会抓取HTML并抓取页面中的图像。

我需要检测图像URL何时是相对链接的图像，然后在图像URL前面注入页面URL，使其成为绝对路径链接图像。

任何想法如何实现这一目标？

相对图片网址目前最终链接到图片，并将其作为＆＃34;域＆＃34; ... chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj。

我需要在所有相关链接图像前面注入网页的URL。

在我的JS函数中，它将图像URL保存到数组中，

var img.src在相对网址上看起来像这样......

因此，如果我可以简单地将chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj替换为可解决我的问题的网页网址。

Chrome扩展程序网址不同，但需要匹配该模式。

用于获取HTML字符串中所有图像的JavaScript函数：

/**
 * Scrape webpage and get all images found in HTML
 * @param  string $htmlSource - HTML string of the webpage HTML
 * @return array - array of HTML strings with list items and images inside each list item
 */
scrapeWebpageForImages: function($htmlSource) {
    // HTML source code of the webpage passed into jQuery so we can work on it as an object
    var $html = $($htmlSource);

    // All images
    var images = $('img', $html),
      scanned = 0,
      filtered = [],
      ogtmp = '',
      srcs = {};

    // Grab the open graph image
    var ogimage = $('meta[property="og:image"]', $html);
    if( ogimage.length > 0 ) {
      ogtmp = $('<img>').prop({
        'src': $(ogimage).text(),
        'class': 'opengraph',
        'width': 1000, // High priority
        'height': 1000
      });
      images.push(ogtmp);
    }

    var i = 0,
      l = images.length,
      result = '',
      img;

    // Cycle through all images
    for(; i < l; i++) {
      scanned += 1;
      img = images[i];

      // Have we seen this image already?
      if( !! srcs[$(img, $html).attr('src')] ) {
        // Yep, skip it
        continue;
      } else {

        //////////////////////////////////////
        ///
        ///  NEED TO DETECT A RELATIVE LINKED IMAGE AND REPLACE WITH ABSOLUTE LINKED IMAGE URL
        ///  USING THE WEBPAGE URL
        ///  
        //////////////////////////////////////


        // Nope, remember it
        srcs[$(img, $html).attr('src')] = true;
        result = '<li><img src="'+img.src+'" title="'+img.alt+'"></li>';
        filtered.push(result);
      }
    } // end for loop

  return filtered;
},

Answer 1

var url = "chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj/assets/xyz";
var myRe = /chrome-extension:\/\/[\w]*/g;
var match = myRe.exec(url);

if(match.length > 0) {
  // Pattern matched
  var path = url.substring(match[0].length);
  url = 'whatever your base url is' + path;
} else {
  console.log('Did not find a url.');
}

使用JavaScript将相对链接图像替换为字符串中的绝对路径图像

1 个答案: