Question

我想获取背景图像URL的文本。预期输出：

123
http://123.com
 (It is empty)

但实际输出：

$('#p1').html($('#bg1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));
$('#p2').html($('#bg2').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));
$('#p3').html($('#bg3').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

我知道可以通过操作字符串来实现此功能。

还有其他方法吗？

我知道这不是CSS规范，但是我想编写GreaseMonkey UserScript来入侵其他网站。

已解决：

这style.backgroundImage救了我！谢谢！

$.fn.extend({
    getBackgroundUrl: function () {
        let imgUrls = [];
        $(this).each(function (index, ele) {
            let bgUrl = ele.style.backgroundImage || 'url("")';
            bgUrl = bgUrl.match(/url\((['"])(.*?)\1\)/)[2];
            imgUrls.push(bgUrl);
        });
        return imgUrls.length === 1 ? imgUrls[0] : imgUrls;
    }
});
    
$('p').html($('a').getBackgroundUrl().join(','));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p></p>

Answer 1

使用单个正则表达式可以轻松得多：匹配url和左括号，捕获单引号或双引号，然后捕获和延迟重复的字符，直到您将获得下一个单引号或双引号：

const getUrl = str => str.match(/url\((['"])(.*?)\1\)/)[2];
$('a').each((_, a) => console.log(getUrl(a.style.backgroundImage)));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

不需要像jQuery这样的大库就可以选择元素，您也可以在香草JS中很容易地做到这一点：

const getUrl = str => str.match(/url\((['"])(.*?)\1\)/)[2];
document.querySelectorAll('a').forEach((a) => {
  console.log(getUrl(a.style.backgroundImage));
});

<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

如何从相对URL获取CSS背景图片URL文本？

1 个答案: