javascript - 有没有办法使用正则表达式来执行相同的图像交换功能，而不管扩展名如何？

Question

一定有吧？也许我只是不太了解如何有效地使用正则表达式和/或 jQuery，但我最初编写了一个小函数来处理将鼠标悬停在页面上的图像(不是 CSS 背景图像)上时的一些图像交换:

$('.footer-show-hide a img, #rfq-cta img').hover(function () {
   var src = $(this).attr("src").replace(".png", "_hover.png");
   $(this).attr("src", src);
  }, function(){
   var src = $(this).attr("src").replace("_hover.png", ".png");
   $(this).attr("src", src);
 });

所以这非常有效，因为到目前为止，所有图像都是 .png，我不需要担心其他任何事情。但是，还提供了其他资源，并且采用 .jpg 格式。虽然我可以轻松打开 Photoshop 并将它们重新保存为 .png，但我宁愿拥有一个更有用/更有弹性的函数，无论文件扩展名如何，其行为方式都相同。

我尝试了一些常见的正则表达式来验证图像扩展名，但没有一个起作用。再说一次，我可能不只是知道如何正确使用它们，但我在大约 20 分钟的修补后放弃了，而是将函数修改为:

$('.footer-show-hide a img, #rfq-cta img, article.blog-post.homepage p.register img').hover(function () {
    var ext = $(this).attr("src").split('.').pop();
    var src = $(this).attr("src").replace("." + ext, "_hover." + ext);
    $(this).attr("src", src);
  }, function(){
    var ext = $(this).attr("src").split('.').pop();
    var src = $(this).attr("src").replace("_hover." + ext, "." + ext);
    $(this).attr("src", src);
  });

(“article.blog-post.homepage p.register img”中的图像是 jpg)

它完全按照我想要的方式工作，但这看起来不太优雅。有没有办法完成同样的事情，但通过使用正则表达式完全忽略扩展名并根据需要附加/删除“_hover”，或者接受任何扩展名并在添加/删除“_hover”时将其替换为相同的扩展名？

Answer 1

假设您的文件名中没有句点(是吗？如果是这样，您将需要匹配直到第一个捕获组中最后一次出现句点)，此正则表达式将起作用。

/([^\.]+)\.([\w]+)$/

所以你的代码看起来像这样:

var src = $(this).attr("src").replace(/([^\.]+)\.([\w]+)/, "$1_hover.$2");

并将其替换回来可以使用:

/([^\.]+)_hover\.([\w]+)$/

代码如下:

var src = $(this).attr("src").replace(/([^\.]+)_hover\.([\w]+)/, "$1.$2");

编辑:了解到这些是完全限定的 URL 而不是相对路径，我在正则表达式中添加了字符串结尾检查