Javascript 书签不会更改图像的来源

Question

我已经尝试创建一个小书签，该小书签可以简单地用一个其他图像替换所有网站的图像。经过尝试和更多尝试后，我得到了一行应该可以工作的代码，但它就是......不行。

javascript:function img_find() {var imgs = document.querySelectorAll("img");return imgs;}  var images = img_find(); for (var i = 0; i < images.length; i++) {images[i].src.replace(images[i].src, "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png";}

这是我尝试过的一些代码。我也尝试过:

javascript:function img_find() {var imgs = document.querySelectorAll("img");return imgs;}  var images = img_find(); for (var i = 0; i < images.length; i++) {images[i].src = "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png";}

由于某种原因，这两段代码都不起作用，第一段没有执行任何操作，第二段只是用网址替换整个网页。

Answer 1

正如评论中所述，您的第二个片段按预期工作，至于第一个片段，它不起作用，因为替换方法不会更改传递给它的原始字符串，而是返回一个新的替换字符串。换句话说，在第一个片段中，您应该在 for 循环内编写:

images[i].src = images[i].src.replace(images[i].src, "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png");

代替你的:

images[i].src.replace(images[i].src, "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png");

也就是说我无论如何都会使用第二个片段，第一个片段就像使用钻头刺穿一张纸。

第一个片段

function img_find() {
  var imgs = document.querySelectorAll("img");
  return imgs;
}

var images = img_find();

for (var i = 0; i < images.length; i++) {
  
  images[i].src = images[i].src.replace(images[i].src, "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png");
  
}

<div>
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
</div>

第二个片段

function img_find() {
  var imgs = document.querySelectorAll("img");
  return imgs;
}

var images = img_find();

for (var i = 0; i < images.length; i++) {
  
  images[i].src = "https://api.time.com/wp-content/uploads/2019/08/caveman-spongebob-spongegar.png";
  
}

<div>
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
  <img src="https://via.placeholder.com/150" width="150">
</div>