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

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

0 голосов
/ 05 августа 2009

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

Цель

Обычный источник изображения: 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, и так далее, и так далее. Любая помощь?

Ответы [ 3 ]

1 голос
/ 05 августа 2009

Быстрое решение - проверить, не содержит ли строка -Dn: 

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

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

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

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

0 голосов
/ 05 августа 2009 
   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);
    }

(добавлено условно)

0 голосов
/ 05 августа 2009

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

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

Вы можете затем создать div 10x10 с фоновым изображением, установленным на изображение 10x20. Так как будут отображаться только верхние 10x10, вы увидите только оригинальную версию.

Тогда в javascript вы можете просто прикрепить к событию звонок на 

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

при событии наведения и 

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

для сброса

Это сместит фон вверх при наведении мыши. Это не только чище, чем использование регулярных выражений для простого обмена изображениями, но и уменьшает количество файлов, которые должна загружать страница.

Надеюсь, это поможет!

...