Регулярное выражение для замены атрибута src тега img

Question

Мне нужно регулярное выражение, которое будет правильно работать, текущее, которое у меня есть, прерывается.

Цель

Normal ЦСИ для изображения: image.png

Использование JQuery по наведению я динамически найти СРК изображения и заменить его 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 и т. Д. И так далее. Любая помощь?

Answer 1

Вы делаете это для эффекта мыши? Почему бы не использовать спрайты изображений? Фактически, вам просто нужно создать 1 изображение, содержащее обе версии изображения, и установить его на фон элемента, который отобразит его.

например, изображение 10x10 и его версия для мыши станут образцом 10x20 с оригиналом поверх версии для мыши.

вы можете создать div 10x10 с фоновым изображением, установленным на изображение 10x20. Поскольку будет отображаться только верхний 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\./)) 

Кроме того, с регулярными выражениями, вы не» t нужно вручную разбить строку и выполнить несколько запросов. Вы можете использовать группировку, чтобы получить то, что вам нужно в одном заменить инструкции, такие как:

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

Если вы хотите читать на регулярных выражений для Javascript: http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions