Question

如何替换博客中的所有网址图片。示例bp1.blogspot.com/image.jpg我想使用javascript或jquery将其更改为cdn.staticly.io/img/bp1.blogspot.com/image.jpg?format=webp

我不能一张一张地换那些图片...非常感谢

Answer 1

假设您必须在客户端上处理图片，以下是一些方法

丑陋（先加载初始图像，然后加载其他图像）

window.addEventListener("load", function() {
  [...document.querySelectorAll("img[src^='https://bp1.blogspot.com']")].forEach(function(img) {
    let src = img.src;
    img.src = "https: //cdn.staticly.io/img/"+ src + "?format=webp";
  })
})

<img src="https://bp1.blogspot.com/image1.jpg" /><br/>
<img src="divider.jpg" />
<img src="https://bp1.blogspot.com/image2.jpg" /><br/>
<img src="https://bp1.blogspot.com/image3.jpg" /><br/>

可能更好

从具有图片的html文件中加载内容，并在显示之前替换它们

$(function() {
  $.get("imageSnippet.html", function(html) {
    $("#container").html(html);
    [...document.querySelectorAll("#container img[src^='https://bp1.blogspot.com']")]
    .forEach(function(img) {
      let src = img.src;
      img.src = "https: //cdn.staticly.io/img/" + src + "?format=webp";
    })
    $("#container").show();
  })
})

#container {
  display: none
}

<div id="container"></div>

Answer 2

使用jQuery：

$('img').each(function(){
  var $this = $(this);
  $this.attr('src',$this.attr('src').replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp");
})

没有jQuery：

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) { 
  var src = imgs[i].src;
  imgs[i].src = src.replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp";
}

将代码放在结束正文标记</body>之前。

Answer 3

尝试一下：

var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].src.replace(/.*?:\/\//g , "https://cdn.statically.io/img/") + "?format=webp";
  };

如何使用自定义网址图片更改博客中的所有网址图片

3 个答案: