javascript - 在背景图像中使用正则表达式获取 div

Question

我正在尝试用纯 js 或 jQuery 编写脚本来捕获每个 <div>在其 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')>

---

我从收集所有 <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 .

---

From this question我知道如何从给定的 div 获取 url，但我想将背景图像中带有此正则表达式的所有 div 收集到一个变量中，因此我可以 each他们并删除那个正则表达式......

首先，脚本是 sencha-src-fallback.js .如果满足特定条件，它最终会从 src 中删除正则表达式。

Answer 1

您可以结合正则表达式和 .filter() 函数来实现您想要的。基本上，我们运行使用 .css() 方法检索的 background-image 属性，并检查它们是否与模式匹配。如果是，我们将返回元素列表(您稍后可以对其进行操作):

在下面的示例中，我希望背景图像匹配模式 /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/

---

OP 询问是否可以在过滤器函数之外单独定义正则表达式。是的，这是可能的:

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/