Javascript 替换img标记的src属性的正则表达式

我需要一个能正常工作的正则表达式，我现在的正则表达式正在崩溃

目标是

图像的正常src为： Image.png

在hover上使用jQuery动态查找图像的src，并将其替换为ImageName-Dn.png

在“悬停”关闭时，将其设置回ImageName.png

我当前的解决方案：

$(document).ready(function(){
   $(".myButton").hover(
        function () {
            var s = $(this).attr('src');
            s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
            $(this).attr('src', s);
        },
        function () {
            var o = $(this).attr('src');
            o = o.replace(/-Dn\./, '.'); 
            $(this).attr('src', o);
        }

    );
});

---

然而，由于某种原因，图像在某个点被设置为

ImageName Dn.png

，然后出错并被设置为

ImageName Dn.png

等等。有什么帮助吗？

你这样做是为了鼠标悬停吗？为什么不使用图像精灵？实际上，您只需要创建一个并排包含两个图像版本的图像，并将其设置为显示该图像的元素的背景

例如，10x10图像及其鼠标悬停版本将成为10x20图像，原始图像位于鼠标悬停版本的顶部

然后可以创建一个10x10 div，背景图像设置为10x20图像。由于只显示10x10的顶部，因此您只能看到原始版本

然后在javascript中，您可以简单地将调用附加到事件

 $(el).style.backgroundPosition = '0px -10px';

关于悬停事件和

$(el).style.backgroundPosition = '0px 0px';

重置它

这将在鼠标上方向上移动背景。这不仅比为了简单的图像交换而必须处理regex更干净，而且还减少了页面必须加载的文件数量

希望这有帮助

   function () {
        var s = $(this).attr('src');
        if( !s.match(/-Dn\.[a-z]+$/) ) {
          s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
          $(this).attr('src', s);
        }
    },
    function () {
        var o = $(this).attr('src');
        o = o.replace(/-Dn\./, '.'); 
        $(this).attr('src', o);
    }

---

（添加条件）

快速修复方法是测试字符串中是否还没有-Dn：

if (!string.match(/-Dn\./))

此外，使用正则表达式，您不需要手动拆分字符串并进行多次搜索。您可以使用分组在单个替换指令中接收所需内容，例如：

string.replace(/(.*)\.(.*)/, "$1-Dn.$2")

如果您想了解Javascript的正则表达式，请执行以下操作：