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

Question

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

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

在 Chrome 扩展程序中，3 个附加图像显示为文本输入以插入图像 URL。

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

我的问题是，在我显示来自网页的图像的图像选择器中，它显示页面中任何图像的损坏图像，并且与相对路径而不是带有域名的完整路径链接在里面。

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

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

然后此图像将在我的扩展程序中的图像选择器/滑块中显示为损坏的图像，因为它将链接到这样的图像，其中相对链接的图像最终会在其前面获取扩展程序 URL...

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

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

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

相对图像 url 当前最终链接到带有此“域”的图像...chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj。

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

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

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

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

Chrome 扩展 URL 不同，但需要匹配该模式。

获取 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.');
}