Question

我想更改图片的src。

var string = "/images/myimage.png";

on mouseover我想将_hover添加到myimage（“/ images / myimage_hover.png”）在mouseout上我想删除“_hover”。

有没有人有这方面的好Regexp？

由于

Answer 1

一个想法：

$('#imageid').hover(function() {
    $(this).attr('src', function(i, val) {
        return val.replace(/^(.+)(\..+)$/, '$1_hover$2');
    });
},
function() {
    $(this).attr('src', function(i, val) {
        // assuming image names don't contain other `_hover` text
        return val.replace('_hover', ''); 
    });
});

更新：同时检查其他答案的表达式，有些更复杂;）但是使用带有回调的attr是一种很好的方法。

Answer 2

编辑 oops - <img>标签的“src”，而不是“href”

您可以通过以下方式获取网址：

 var imgUrl = $('#imageId').attr('src');

一旦你有了，你可以添加“_hover”：

 imgUrl = imgUrl.replace(/^(.*)\.png$/, "$1_hover.png");

和删除：

 imgUrl = imgUrl.replace(/_hover\.png/, '.png');

因此，为正确的悬停做好准备：

 $('#imageId').hover(
   function() {
     var $img = $(this);
     if (!/_hover\.png$/.test($img.attr('src')))
       $img.attr('src', $img.attr('src').replace(/^(.*)\.png$/, '$1_hover.png');
   },
   function() {
     var $img = $(this);
     $img.attr('src', $img.attr('src').replace(/_hover\.png$/, '.png');
   }
 );

我在第一个函数中包含了一个测试，试图防止“foo_hover_hover.png”发生。

Answer 3

无论您的文件扩展名是什么，这都是有效的解决方案：

yourString = yourString.replace(/^(.+)\.([^.]+)$/, '$1_hover.$2'); // do this onmouseover
yourString = yourString.replace(/^(.+)_hover\.([^.]+)$/, '$1.$2'); // do this onmouseout

演示：

js> var yourString = 'meow.test.png';
js> yourString = yourString.replace(/\.([^.]+)$/, '_hover.$1');
meow.test_hover.png
js> yourString = yourString.replace(/_hover\.([^.]+)$/, '.$1');
meow.test.png
js>

Answer 4

试试这个：

var testString = '"/images/myimage.png';
var regExp = /(.*)(\.)(.*)/g;
var testHover =  testString.replace(regExp, "$1_hover$2$3")
alert(testHover); //Hover Image
alert(testString.replace("_hover", ""));//Regular Image

Answer 5

您是否考虑过不使用文件名存储扩展名？如果您的格式一致，或者您单独存储扩展名，则可以让您的生活更轻松。这样，如果你的命名方案发生变化，你的正则表达式破坏的可能性就会降低。

i.e.
var str = "/images/myimage" + (is_selected ? "_hover" : "") + ".png"

正则表达式在文件结束前添加和删除文本

5 个答案: