Сжатие пути источника изображения в Javascript

Question

У меня есть веб-приложение, которое заменяет несколько img другими img.

Например: изображение с путем http://example.com/example/example/images/dir/1.gif заменено на http://cdn.example.com/dir/1.gif.

.используйте jQuery attr ().

Итак, мой код выглядит примерно так:

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")

Так есть ли способ сжать это?То есть написано меньше символов?

Примечание. В каждой строке изображения на обоих сайтах одинаковы.Например, 1.gif снова заменяется на 1.gif, но на другом сервере. Итак, я хочу заменить сервер .Когда http://www.example.com/dir/images/dir/ заменить на http://cdn.example.com/dir/.

Большое спасибо

Answer 1

Это так же просто, как использовать цикл:

var i;
for ( i = 1; i <= 10; i++ )
{
  $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif');
}

Или вы просили найти и заменить все?

Вы можете использовать attr начинается с селектора :

$('img[src^="http://www.example.com/"]').each(function(index,element){
  var $this, src, newSrc;
  $this = $(this);
  src = $this.attr('src');
  //do your replacement here
  newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
  $this.attr('src', newSrc);
});

Как указал Мойн Заман, attr также может принимать функцию в качестве параметра, что сокращает этот скрипт до:

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){
  return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
});

Answer 2

Вам необходим метод JavaScript .replace () с регулярными выражениями для замены содержимого.

в jQuery селектор атрибута ^= означает поиск значения атрибута, которое начинается с.

Попробуйте, я предполагаю, что все изображения начинаются с "www.example.com":

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src',
    function(i,src){ 
        return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});