Соберите все встроенные фоновые изображения со страницы - PullRequest
Новая
       22

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

0 голосов
/ 13 февраля 2012

Моя цель - собрать все URL-адреса изображений с помощью jquery, которые вставляются в html-код, например: 

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

или 

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

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

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

Спасибо!

Ответы [ 2 ]

2 голосов
/ 13 февраля 2012

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

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

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

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

1 голос
/ 13 февраля 2012

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

Вот пример: 

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

Если возможно иметь URL-адреса в стиле, которые не являются частью фона, в то время как фон может быть без изображения, регулярное выражение должно быть более сложным, и для удобства сопровождения кода я бы просто добавил другое "если", а не чем сделать регулярное выражение с отрицательным взглядом (который многим людям трудно читать).

Итак, код будет выглядеть так: 

    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/

...