Question

我正在尝试用纯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。

From this question我知道如何从给定的div中获取url，但是我想在background-image中将所有带有此正则表达式的div收集到一个变量中，所以我可以each他们并删除该正则表达式...

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

Answer 1

您可以结合使用正则表达式和.filter()函数来实现您想要的效果。基本上我们运行使用background-image方法检索的.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/

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

1 个答案: