javascript - 如何从相对 URL 获取 Css 背景图像 URL 文本？

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 这样的大型库来选择元素，您也可以在 vanilla 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>