Javascript 遍历所有并将.png替换为.svg

在javascript或jquery中，如何遍历页面中的每个标记，检查它是否是.png扩展名，用.svg替换.png扩展名，如果是.png扩展名？

编辑：

以下是我原始答案的编辑版本，感谢这些有用的评论

$('img').each(function() {
  var img_src = $(this).attr('src');
  var new_src = img_src.replace(/\.png$/, '.svg');
  $(this).attr('src', new_src);
});

原创的

我还没有测试过这个，但我相信它应该会起作用

$('img').each(function() {
  var img_src = $(this).attr('src');

  if(img_src.indexOf('.png')) {
    var new_src = img_src.replace('.png','.svg');
    $(this).attr('src', new_src);
  }
});

编辑：

以下是我原始答案的编辑版本，感谢这些有用的评论

$('img').each(function() {
  var img_src = $(this).attr('src');
  var new_src = img_src.replace(/\.png$/, '.svg');
  $(this).attr('src', new_src);
});

原创的

我还没有测试过这个，但我相信它应该会起作用

$('img').each(function() {
  var img_src = $(this).attr('src');

  if(img_src.indexOf('.png')) {
    var new_src = img_src.replace('.png','.svg');
    $(this).attr('src', new_src);
  }
});

---

我不明白这个问题的意义，不管怎样，这是一个未经测试的代码，但它应该可以工作

var imgs = document.getElementsByTagName('img');
for (var i in imgs) {
    var img = imgs[i],
        ext = img.src.split('.').pop();
    if (ext.toLower() == 'png') {
        img.src = img.src.replace(/\.png$/, '.svg');
    }
}

---

我不明白这个问题的意义，不管怎样，这是一个未经测试的代码，但它应该可以工作

var imgs = document.getElementsByTagName('img');
for (var i in imgs) {
    var img = imgs[i],
        ext = img.src.split('.').pop();
    if (ext.toLower() == 'png') {
        img.src = img.src.replace(/\.png$/, '.svg');
    }
}

---

您可以利用.attr的重载之一，而不是显式循环：

$("img").attr("src", function (idx, attr) {
    return attr.replace(/\.png$/, ".svg");
});

参考：

---

您可以利用.attr的重载之一，而不是显式循环：

$("img").attr("src", function (idx, attr) {
    return attr.replace(/\.png$/, ".svg");
});

参考：

---

---

你试过什么吗？你能发布吗？$'img'.eachfunctioni，e{e.src=e.src.replace'.png'，'.svg'}你也可以使用带有选择器的属性结束来只处理png@MartinSmith是的，但找到所有图像元素可能更容易，而不需要在该过程中进行检查。如果将端点与选择器一起使用，则无需检查匹配元素的位置，仍然必须以端点为目标。png@Ian-但正如您所知，所有内容都将匹配，您只需使用子字符串即可$img[src$='.png'].attrsrc，函数idx，src{return src.substring0，src.length-4+.svg；}；你试过什么吗？你能发布吗？$'img'.eachfunctioni，e{e.src=e.src.replace'.png'，'.svg'}你也可以使用带有选择器的属性结束来只处理png@MartinSmith是的，但找到所有图像元素可能更容易，而不需要在该过程中进行检查。如果将端点与选择器一起使用，则无需检查匹配元素的位置，仍然必须以端点为目标。png@Ian-但正如您所知，所有内容都将匹配，您只需使用子字符串即可$img[src$='.png'].attrsrc，函数idx，src{return src.substring0，src.length-4+.svg；}；无需使用indexOf检查-只需更换-如果没有匹配项，则不会更换任何内容。使用它可能更安全：.replace/\.png$/，.svgYeah，这是一个很好的观点。在我发布这篇文章之后，我看到了其他答案，这些答案似乎比我的答案更简洁。我想我已经变得过于谨慎，在尝试替换之类的事情时，没有确定要替换什么！感谢您提供的信息。img_src.indexOf'.png'将几乎总是计算为truthy，因为-1是真的，这是一个很好的观点。我在没有查找indexOf的情况下动态地执行了此操作，并且不记得如果未找到它，它的计算结果是-1还是false。谢谢您的更正和信息。@JoshWa如我所说，您应该使用var new\u src=img\u src.replace/\.png$/，'.svg'；无需使用indexOf检查-只需更换-如果没有匹配项，则不会更换任何内容。使用它可能更安全：.replace/\.png$/，.svgYeah，这是一个很好的观点。在我发布这篇文章之后，我看到了其他答案，这些答案似乎比我的答案更简洁。我想我已经变得过于谨慎，在尝试替换之类的事情时，没有确定要替换什么！感谢您提供的信息。img_src.indexOf'.png'将几乎总是计算为truthy，因为-1是真的，这是一个很好的观点。我在没有查找indexOf的情况下动态地执行了此操作，并且不记得如果未找到它，它的计算结果是-1还是false。谢谢您的更正和信息。@JoshWa如我所说，您应该使用var new\u src=img\u src.replace/\.png$/，'.svg'；如果文件名以png结尾，并且扩展名中不包含png，则会错误地进行替换。您是对的，我编辑了我的答案。您忘记初始化为替换，这是我的观点，这里的另一个答案-您不需要先检查，只需执行替换即可。如果没有匹配项，则不会替换任何项。所以首先，你的循环应该是VARI=0；icts和数组，谢谢，我不知道HTMLElement数组的这些问题+1但是你需要告诉它什么属性$img.attrsrc，函数…@MartinSmith Sheesh我怎么忘了？哈哈，谢谢你+1你需要告诉它什么属性$img.attrsrc，函数…@MartinSmith Sheesh我怎么忘了？哈哈，谢谢