imgタグのsrc属性を置き換える正規表現

Question

正常に動作する正規表現が必要ですが、現在持っているものは壊れています。私は動的に画像のSRCを見つけ、と交換ホバーにはjQueryを使用して Image.png

imagenameの-Dn.png

：

目標は

画像について

ノーマルsrcがあるあります

$(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.pngに

私の現在のソリューションに設定します

しかし何らかの理由で、ある時点の画像がImageName-Dn.pngに設定されてから、ネジが上がってImageName-Dn-Dn.pngに設定されるなどのようになります。どんな助け？

Answer 1

あなたはマウスオーバー効果のためにこれをしていますか？イメージスプライトを使わないのはなぜですか？効果的には、画像の両方のバージョンを横に並べて、それを表示する要素の背景に設定する1つの画像を作成するだけです。

たとえば、10x10イメージとマウスオーバーバージョンは、マウスオーバーバージョンの上にオリジナルの10x20イメージになります。

次に、10x20イメージに設定された背景イメージを使用して10x10 divを作成できます。上位10x10のみが表示されるため、元のバージョンのみが表示されます。

は次にJavaScriptで、あなたは単にホバーイベントに

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

にイベントにコールを添付することができますし、

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

は、それが

これはアップの背景をシフトするリセットするためにマウスオーバー。これは単純なイメージスワップのために正規表現を扱わなければならないだけでなく、ページが読み込まなければならないファイルの数も減らします。

希望すると便利です。

Answer 2

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

（追加条件）

Answer 3

クイックフィックスは、文字列はすでにそれに-Dnを持っていないかどうかをテストすることです。また、

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

を正規表現で、あなたはドン」手動で文字列を分割して複数の検索を行う必要がありません。あなたはJavascriptの正規表現にまで読みたい場合は

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

：あなたは、次のような命令を置き換える単一に必要なものを受け取るためにグループ化に使用できるhttp://en.wikibooks.org/wiki/JavaScript/Regular_Expressions