Regulärer Ausdruck als Ersatz für das src-Attribut des img-Tags

Question

Ich brauche einen regulären Ausdruck, der ordnungsgemäß funktioniert, der aktuelle, den ich habe, bricht.

Das Ziel ist

Normale src für ein Bild ist: Image.png

Mit jQuery auf schweben mit Imagename-Dn.png

ich es dynamisch die src eines Bildes suchen und ersetzen

auf schweben off setzt er es ImageName.png zurück

Meine aktuelle Lösung:

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

    ); 
}); 

Aber aus irgendeinem Grund wird das Bild an einem bestimmten Punkt auf ImageName-Dn.png gesetzt und dann verschraubt und auf ImageName-Dn-Dn.png gesetzt und so weiter und so fort. Irgendeine Hilfe?

Answer 1

Machst du das für einen Mouseover-Effekt? Warum nicht Bildsprites verwenden? Effektiv müssen Sie nur ein Bild erstellen, das beide Versionen des Bilds nebeneinander enthält, und es auf den Hintergrund eines Elements setzen, das es anzeigen wird.

zum Beispiel ein 10x10 Bild und es ist Mouseover-Version wird ein 10x20 Bild mit dem Original über die Mouseover-Version.

können Sie dann ein 10x10 div mit dem Hintergrundbild auf dem 10x20 Bild erstellen. Da nur die Top 10x10 angezeigt werden, sehen Sie nur die Originalversion.

Dann in Javascript können Sie einfach auf ein Ereignis

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

auf dem Hover-Ereignis einen Anruf befestigen und

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

zurückgesetzt es

Diese den Hintergrund verschieben nach oben auf die Maus rüber. Das ist nicht nur sauberer, als dass man für einen einfachen Bildaustausch mit Regex umgehen muss, sondern reduziert auch die Anzahl der Dateien, die die Seite laden muss.

Hoffe, das hilft!

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

(hinzugefügt bedingte)

Answer 3

Eine schnelle Lösung ist zu prüfen, wenn die Zeichenfolge nicht bereits -dn haben darin:

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

Auch mit den regulären Ausdrücken, Sie don‘ t müssen den String manuell teilen und mehrere Suchen durchführen. Sie können Gruppierung verwenden zu empfangen, was Sie in einer einzigen ersetzen Anweisung benötigen wie:

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

Wenn Sie auf reguläre Ausdrücke für Javascript zu lesen: http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions