собрать все встроенные фоновые изображения со страницы

Question

Моя цель состоит в том, чтобы собрать все изображения URLs с JQuery, которые вставляются в HTML код, как это:

style="background: url(...)" 

или

style="background-image: url(...)" 

В первом примере могут быть разные случаи (например, добавление повтора, положение и изменение порядка тегов).

Я полагаю, что regexp будет лучшим способом сделать это, , но я не очень хорош в этом.

Спасибо!

Answer 1

Да. Я бы пошел с регулярным выражением.

Вот пример:

var img_urls=[]; 
$('[style*="background"]').each(function() { 
    var style = $(this).attr('style'); 
    var pattern = /background.*?url\('(.*?)'\)/g 
    var match = pattern.exec(style); 
    if (match) {   
     img_urls.push(match[1]); 
     //just for testing, not needed: 
     $('#result').append('<li>'+match[1]+'</li>'); 
    } 
});​ 

Если можно иметь URLs в стиле, которые не являются частью фона, в то время как фон может быть без изображения, регулярное выражение должно быть более сложным, и для я бы просто добавил другое «если», а не делать регулярное выражение с негативным взглядом (что многие люди испытывают с трудом для чтения).

Таким образом, код будет тогда так:

var img_urls=[]; 
    $('[style*="background"]').each(function() { 
     var style = $(this).attr('style'); 
     var pattern = /background(.*?)url\('(.*?)'\)/ig 
     var match = pattern.exec(style); 
     if (match && match.length > 0) { 
      if (match[1].indexOf(';')>0) return;           
      img_urls.push(match[2]); 
      //just for testing, not needed: 
      $('#result').append('<li>'+match[2]+'</li>'); 

     } 
    });​ 

Вы можете играть с ним на этой скрипке: http://jsfiddle.net/Exceeder/nKPbn/

Answer 2

Вы можете сделать:

$('[style*="background"]').each(function(){ 
    // do something with each 
}); 

Это будет цикл по всем элементам, которые имеют встроенный style и background набор для них.

Обратите внимание, что *= означает, где style имеет background ключевое слово где-то в нем.