1

I'm trying to write a script in pure js or jQuery to catch every <div> with a particular regex in its CSS background-image property. 

<div style="background-image: url('the_regex/http://example.org/image.jpg')>
<div style="background-image: url('the_regex/http://example.org/another.jpg')>

I'm starting with an existing, functional script that collects all <img> elements that have the regex in the src="" attribute. It's looking for elements like this:

<img src="the_regex/http://example.org/img.jpg">
<img src="the_regex/http://example.org/img2.jpg">

with this 

  this.$imgs = $("img[src*='" + this.the_regex + "']");

So this works for <img> elements, but my site is all <div>s with background-image.

From this question I know how to get the url from a given div, but I want to collect all the divs with this regex in the background-image into a single variable, so i can each them and remove that regex…

Fwiw, the script is sencha-src-fallback.js. It eventually removes the regex from the src if a certain condition is satisfied.

Community
  • 1
  • 1
nimmolo
  • 191
  • 3
  • 14
  • I don't know html, but what is background-image property, is that an attribute of the div tag? –  Sep 16 '14 at 19:50

1 Answers1

2

You can combine regex and the .filter() function to achieve what you want. Basically we run the background-image property retrieved using the .css() method, and check if they match the pattern. If they do, we return the list of elements (which you can manipulate later):

In the example below, I want the background-image to match the pattern /http:\/\/placehold\.it/gi (i.e. matching http://placehold.it and as a global and case-insensitive match), and if they do, I slide them up. Of course you should use your own pattern here and chain alternative downstream jQuery methods, I am using it as a proof-of-concept :) 

$('div').filter(function() {
    return $(this).css('background-image').match(/http:\/\/placehold\.it/gi);
}).slideUp();

It works for both background images being specified through CSS, or through inline style attribute.

See demo here: http://jsfiddle.net/teddyrised/nmw9a4hk/2/

OP asked if it is possible to define the regexp outside of the filter function separately. Yes, it is possible:

var pattern = new RegExp("http:\/\/placehold\.it", "gi");

$('div').filter(function() {
    return $(this).css('background-image').match(pattern);
}).slideUp();

See updated demo here: http://jsfiddle.net/teddyrised/nmw9a4hk/12/

Terry
  • 63,248
  • 15
  • 96
  • 118
  • Thanks - I'm having trouble trying to define and substitute a variable for the match string. Seems like it needs a new RegExp constructor to put a variable together with '/g' -- like `var theRegex = "1600x50";` then `.match(new RegExp(theRegex, "\/g"));` ? however this is not working – nimmolo Sep 16 '14 at 20:48
  • @nimmolo, you'll want to do `new RegExp(theRegex, "g")`. But I recommend placing that logic outside of the `.filter()` function, otherwise you are going to be wasting efficiency recreating the same expression multiple times. So `theRegex = new RegExp(theRegex, "g")`, and then inside the callable function `.match(theRegex)`. – Sam Sep 16 '14 at 20:51
  • @nimmolo I have updated the answer to include the scenario where you want to pre-define the pattern. Updated the demo, too: http://jsfiddle.net/teddyrised/nmw9a4hk/12/ – Terry Sep 16 '14 at 21:08
  • @Sam @Terry thanks. Since i want to strip out the regex if (condition met) I've updated the jsfiddle to remove the pattern from `background-image` on `click`. It's not working, but what I've got is intended to collect the divs with the pattern in a variable `divs` and then replace the string on `each` with an empty string. http://jsfiddle.net/nmw9a4hk/13/ – nimmolo Sep 16 '14 at 22:09
  • `this` in *that* context is just an HTML element, you will need to turn it into a jQuery element to use `.css()` ([JSFiddle](http://jsfiddle.net/nmw9a4hk/14/)). Depending on what your expression replaces, you may just be able to set the `background-image` property to `none` ([JSFiddle](http://jsfiddle.net/nmw9a4hk/16/)). – Sam Sep 16 '14 at 22:10
  • @nimmolo Precisely what @Sam has said. You will need to use `$(this)` as it is a jQuery object which methods will apply, while `this` is simply a HTML node that jQuery methods will not apply. If you change the line to `$(this).css("background-image", "none");` in the `.each()` look, things will work: http://jsfiddle.net/teddyrised/nmw9a4hk/15/ – Terry Sep 16 '14 at 22:12
  • woohoo! thanks both of you. if i had any rep points, i'd vote it up – nimmolo Sep 16 '14 at 22:17