正則表達式替換img標籤的src屬性

我需要一個正確的表達式，正確的工作，我目前正在打破。正則表達式替換img標籤的src屬性

目標是

的圖像正常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等等。任何幫助？

來源

2009-08-05 Seth Duncan

你是否在做這個鼠標懸停效果？爲什麼不使用圖像精靈？實際上，您只需要創建一個圖像並排包含圖像版本，並將其設置爲顯示該圖像的元素的背景。

例如，一個10x10圖像和它的鼠標懸停版本將成爲一個10x20圖像，其原始版本位於鼠標懸停版本之上。

然後，您可以創建一個10x10 div，背景圖像設置爲10x20圖像。由於只顯示前10x10，您只能看到原始版本。

然後在JavaScript中，你可以簡單地附加到事件調用

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

上懸停事件和

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

將其復位

這將高達上移的背景鼠標懸停。這不僅比簡單的圖像交換處理正則表達式更清潔，而且還減少了頁面加載的文件數量。

希望這會有所幫助！

來源

2009-08-05 03:15:56

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

（添加條件）

來源

2009-08-05 03:18:04

速戰速決是測試如果字符串還沒有-Dn它：

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

此外，在正則表達式，你不」 t需要手動分割字符串並進行多次搜索。您可以使用組收到您在一個替代指令需要的東西，如：

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

如果你想上JavaScript正則表達式閱讀起來：http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions

來源

2009-08-05 03:20:23

正則表達式替換img標籤的src屬性

回答

相關問題