Expression régulière pour remplacer l'attribut src de la balise img

Question

J'ai besoin d'une expression régulière qui fonctionnera correctement, celle que j'ai actuellement se casse.

L'objectif est

src normale pour une image est: Image.png

En utilisant jQuery sur hover Je trouve dynamiquement le src d'une image et le remplacer par ImageName-Dn.png

En vol stationnaire hors il Retourne en ImageName.png

Ma solution actuelle:

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

    ); 
}); 

Toutefois, pour une raison quelconque, l'image est définie à ImageName-Dn.png puis se visse et se règle sur ImageName-Dn-Dn.png et ainsi de suite. De l'aide?

Answer 1

faites-vous cela pour un effet mouseover? Pourquoi ne pas utiliser les sprites d'image? Effectivement, vous avez juste besoin de créer une image qui contient les deux versions de l'image côte à côte et le mettre à l'arrière-plan d'un élément qui va l'afficher. Par exemple, une image 10x10 et sa version mouseover deviendra une image 10x20 avec l'original en haut de la version mouseover.

Vous pouvez ensuite créer une div 10x10 avec l'image d'arrière-plan définie sur l'image 10x20. Puisque seul le top 10x10 sera affiché, vous ne voyez que la version originale.

Puis en javascript vous pouvez simplement joindre à un événement un appel à

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

sur l'événement de vol stationnaire et

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

pour le réinitialiser

Cela déplace l'arrière-plan sur la souris sur. Non seulement c'est plus propre que d'avoir à traiter avec regex pour un simple échange d'image, mais cela réduit également le nombre de fichiers que la page doit charger.

Espérons que cela aide!

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

(ajoutée conditionnelle)

Answer 3

Une solution rapide est de tester si la chaîne n'a pas déjà -dN en elle:

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

En outre, avec les expressions rationnelles, vous n » t besoin de diviser manuellement la chaîne et de faire plusieurs recherches. Vous pouvez utiliser le regroupement pour recevoir ce dont vous avez besoin dans une seule instruction remplacer comme:

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

Si vous voulez lire sur des expressions régulières pour Javascript: http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions