从页面收集所有内嵌背景图像

发布于 2025-01-05 03:06:56 字数 267 浏览 1 评论 0原文

我的目标是使用 jquery 收集插入 html 代码中的所有图像 url，如下所示：

style="background: url(...)"

或者

style="background-image: url(...)"

在第一个示例中可能存在不同的情况（例如添加重复、位置和更改标签的顺序）。

我认为正则表达式将是最好的方法，但我不太擅长。

谢谢！

原文

My goal is to collect all images urls with jquery that are inserted in the html code like this:

style="background: url(...)"

style="background-image: url(...)"

In the first example there may be different cases (like adding repeat, position, and changing the order of the tags).

I suppose regexp will be the best way to do it,
but I'm not very good at it.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁绊已千年 2025-01-12 03:06:56

您可以这样做：

$('[style*="background"]').each(function(){
  // do something with each
});

这将循环遍历所有设置了内联 style 和 background 的元素。

请注意，*= 表示style 中的某个位置有background 关键字。

You can do:

$('[style*="background"]').each(function(){
  // do something with each
});

This will loop over all elements that have inline style and background set to them.

Notice that *= means where style has background keyword somewhere in it.

回复收藏 0 原文

找回味觉 2025-01-12 03:06:56

是的。我会选择正则表达式。

这是一个示例：

var img_urls=[];
$('[style*="background"]').each(function() {
    var style = $(this).attr('style');
    var pattern = /background.*?url\('(.*?)'\)/g
    var match = pattern.exec(style);
    if (match) {        
        img_urls.push(match[1]);
        //just for testing, not needed:
        $('#result').append('<li>'+match[1]+'</li>');
    }
});

如果样式中可能存在不属于背景的 url，而背景可能没有图像，则正则表达式应该更复杂，并且为了代码可维护性，我只需添加另一个“if “而不是使用负向前看来制作正则表达式（许多人难以阅读）。

所以，代码将是这样的：

    var img_urls=[];
    $('[style*="background"]').each(function() {
        var style = $(this).attr('style');
        var pattern = /background(.*?)url\('(.*?)'\)/ig
        var match = pattern.exec(style);
        if (match && match.length > 0) {
            if (match[1].indexOf(';')>0) return;                                         
            img_urls.push(match[2]);
            //just for testing, not needed:
            $('#result').append('<li>'+match[2]+'</li>');

        }
    });

你可以在这个小提琴上玩它：
http://jsfiddle.net/Exceeder/nKPbn/

Yep. I would go with regexp.

Here is an example:

var img_urls=[];
$('[style*="background"]').each(function() {
    var style = $(this).attr('style');
    var pattern = /background.*?url\('(.*?)'\)/g
    var match = pattern.exec(style);
    if (match) {        
        img_urls.push(match[1]);
        //just for testing, not needed:
        $('#result').append('<li>'+match[1]+'</li>');
    }
});

If it is possible to have urls in style that are not part of the background, while background could be without image, the regexp should be more complicated and, for the code maintainability sake, I would simply add another "if" rather than make regexp with negative lookahead (which many people have difficulty to read).

So, the code would be then like this:

    var img_urls=[];
    $('[style*="background"]').each(function() {
        var style = $(this).attr('style');
        var pattern = /background(.*?)url\('(.*?)'\)/ig
        var match = pattern.exec(style);
        if (match && match.length > 0) {
            if (match[1].indexOf(';')>0) return;                                         
            img_urls.push(match[2]);
            //just for testing, not needed:
            $('#result').append('<li>'+match[2]+'</li>');

        }
    });

You can play with it on this fiddle:
http://jsfiddle.net/Exceeder/nKPbn/

回复收藏 0 原文

~没有更多了~