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

【问题标题】：Regular Expression to replace src attribute of img tag正则表达式替换img标签的src属性
【发布时间】：2023-03-09 04:00:01
【问题描述】：

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

目标是

图像的正常 src 是：图片.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，依此类推。有什么帮助吗？

【问题讨论】：

标签： javascript jquery regex rollover

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

然后您可以创建一个 10x10 的 div，并将 background-image 设置为 10x20 图像。由于只会显示前 10x10，因此您只能看到原始版本。

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

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

关于悬停事件和

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

重置它

这将在鼠标悬停时将背景向上移动。这不仅比为简单的图像交换处理正则表达式更简洁，而且还减少了页面必须加载的文件数量。

希望这会有所帮助！

【讨论】：

【解决方案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);
    }

（添加条件）

【讨论】：