Question

必须有，对吗？也许我对如何有效地使用正则表达式和/或jQuery知之甚少，但是当我将鼠标悬停在页面上的图像上时（不是CSS背景图像），我最初编写了一个小函数来处理一些图像交换：< / p>

$('.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);
  });

（图片＆＃39; article.blog-post.homepage p.register img＆＃39;是一个jpg）

它完全符合我的要求，但这看起来并不优雅。有没有办法完成同样的事情，但通过使用正则表达式完全忽略扩展名并追加/删除＆＃39; _hover＆＃39;根据需要或接受任何扩展名，并在添加/删除＆＃39; _hover＆＃39;？

时将其替换为相同的扩展名

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");

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

有没有办法使用正则表达式执行相同的图像交换功能，无论扩展？

1 个答案: