我想获取背景图像 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>
最佳答案
使用单个正则表达式可以更轻松地做到这一点:匹配 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>
关于javascript - 如何从相对 URL 获取 Css 背景图像 URL 文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52731892/