Question

我需要一个能够正常工作的正则表达式，当前的表达式正在破坏。

目标是

图像的正常src是： Image.png

在悬停时使用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-Dn.png，依此类推。任何帮助？

Answer 1

快速解决方法是测试字符串中是否还有-Dn：

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

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

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

如果您想阅读Javascript的正则表达式：http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions

Answer 2

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

例如，10x10图像及其鼠标悬停版本将成为10x20图像，原始版本位于鼠标悬停版本之上。

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

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

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

关于悬停事件和

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

重置它

这会将鼠标移开背景。这不仅比简单的图像交换处理正则表达式更清晰，它还减少了页面必须加载的文件数量。

希望这有帮助！

Answer 3

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

（添加条件）

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

3 个答案: