Получить div с регулярным выражением в фоновом изображении

Я пытаюсь написать скрипт на чистом 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, если выполняется определенное условие.


javascript jquery regex background-image
person nimmolo    schedule 16.09.2014    source источник
comment
Я не знаю html, но что такое свойство background-image, это атрибут тега div?   -  person    schedule 16.09.2014

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете комбинировать регулярное выражение и функцию .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/

person Terry    schedule 16.09.2014
comment
Спасибо. У меня возникли проблемы с определением и заменой переменной для строки совпадения. Похоже, нужен новый конструктор RegExp для объединения переменной с '/g' - например, var theRegex = "1600x50";, затем .match(new RegExp(theRegex, "\/g"));? однако это не работает - person nimmolo; 17.09.2014
comment
@nimmolo, ты хочешь сделать new RegExp(theRegex, "g"). Но я рекомендую размещать эту логику за пределами функции .filter(), иначе вы потеряете эффективность, воссоздавая одно и то же выражение несколько раз. Итак, theRegex = new RegExp(theRegex, "g"), а затем внутри вызываемой функции .match(theRegex). - person Sam; 17.09.2014
comment
@nimmolo Я обновил ответ, включив в него сценарий, в котором вы хотите предварительно определить шаблон. Также обновлена ​​демонстрация: jsfiddle.net/teddyrised/nmw9a4hk/12. - person Terry; 17.09.2014
comment
@Сэм @Терри, спасибо. Поскольку я хочу удалить регулярное выражение, если (соблюдено условие), я обновил jsfiddle, чтобы удалить шаблон из background-image на click. Это не работает, но то, что у меня есть, предназначено для того, чтобы собрать div с шаблоном в переменной divs, а затем заменить строку на each пустой строкой. jsfiddle.net/nmw9a4hk/13 - person nimmolo; 17.09.2014
comment
this в этом контексте является просто элементом HTML, вам нужно будет превратить его в элемент jQuery, чтобы использовать .css() (JSFiddle). В зависимости от того, что заменяет ваше выражение, вы можете просто установить для свойства background-image значение none (JSFiddle ). - person Sam; 17.09.2014
comment
@nimmolo Именно то, что сказал @Sam. Вам нужно будет использовать $(this), так как это объект jQuery, к которому будут применяться методы, а this — это просто узел HTML, к которому методы jQuery не будут применяться. Если вы измените строку на $(this).css("background-image", "none"); в виде .each(), все будет работать: jsfiddle.net/teddyrised/nmw9a4hk /15 - person Terry; 17.09.2014
comment
ууууу! спасибо вам обоим. если бы у меня были очки репутации, я бы проголосовал за них - person nimmolo; 17.09.2014