Я пытаюсь написать скрипт на чистом js или jQuery, чтобы поймать каждый <div> с определенным регулярным выражением в его свойстве CSS background-image.
<div style="background-image: url('the_regex/http://example.org/image.jpg')>
<div style="background-image: url('the_regex/http://example.org/another.jpg')>
Я начинаю с существующего функционального скрипта, который собирает все элементы <img>, имеющие регулярное выражение в атрибуте src="". Он ищет такие элементы:
<img src="the_regex/http://example.org/img.jpg">
<img src="the_regex/http://example.org/img2.jpg">
с этим
this.$imgs = $("img[src*='" + this.the_regex + "']");
Так что это работает для <img> элементов, но мой сайт состоит из <div> с background-image.
Из этого вопроса я знаю, как получить URL-адрес из данного div, но Я хочу собрать все элементы div с этим регулярным выражением в фоновом изображении в одну переменную, чтобы я мог их each удалить и удалить это регулярное выражение...
Между прочим, сценарий sencha-src-fallback.js. В конечном итоге он удаляет регулярное выражение из src, если выполняется определенное условие.
Ответ 1 · рейтинг 2 · Terry
Вы можете комбинировать регулярное выражение и функцию .filter() для достижения желаемого. По сути, мы запускаем свойство background-image, полученное с помощью метода .css(), и проверяем, соответствуют ли они шаблону. Если это так, мы возвращаем список элементов (которым вы сможете манипулировать позже):
В приведенном ниже примере я хочу, чтобы фоновое изображение соответствовало шаблону /http:\/\/placehold\.it/gi (т. е. соответствовало http://placehold.it и являлось глобальным и нечувствительным к регистру совпадением), и если они соответствуют, я перемещаю их вверх. Конечно, вы должны использовать здесь свой собственный шаблон и связать альтернативные методы jQuery ниже по течению, я использую его как доказательство концепции :)
$('div').filter(function() {
return $(this).css('background-image').match(/http:\/\/placehold\.it/gi);
}).slideUp();
Он работает как для фоновых изображений, указанных через CSS, так и для встроенного атрибута стиля.
См. демо здесь: http://jsfiddle.net/teddyrised/nmw9a4hk/2/
ОП спросил, можно ли отдельно определить регулярное выражение вне функции фильтра. Да, это возможно:
var pattern = new RegExp("http:\/\/placehold\.it", "gi");
$('div').filter(function() {
return $(this).css('background-image').match(pattern);
}).slideUp();
См. обновленную демонстрацию здесь: http://jsfiddle.net/teddyrised/nmw9a4hk/12/
