javascript - 从 background-image 属性中获取 URL

Question

如何从 background-image 属性中获取 URL：

现在我这样做：

(window.getComputedStyle(element).getPropertyValue("background-image")).replace('url(','').replace(')','');

但是，如果在背景图像中还有其他的东西，比如 webgradient 等等，我也会得到它们。我怎样才能避免这种情况？

Answer 1

这样做怎么办：

var m = (window.getComputedStyle(element).getPropertyValue("background-image")).match(/url\(([^)]+)\)/i); 

if (m) { ... m[1] ... }

Answer 2

这里有一种方法来做到这一点，而无需考虑仅使用核心 JS 的多个背景图像：

var bg="url(http://css.bbystatic.com/images/_headerFooter/icons-new-e42e71d385bbad8d5c‌​cba0cfeb3983a1.png), -webkit-linear-gradient(top, rgb(255, 242, 0) 0%, rgb(247, 207, 0) 100%)";

var imgUrl=(
        bg.match( /url\([^\)]+\)/gi ) || 
        [""]
    )[0]
    .split(/[()'"]+/)[1];

alert(imgUrl);

imgUrl 将是一个 url 或未定义，具体取决于您提供的内容。它应该是 100% crossbrowser/node.js 好的，不涉及 dom...

Answer 3

Try this code, this might be the regexp you need

/url(\s*\S*\s*)/i

If the regexp dandavis listed works you can do this

.match(/url([^)+])/gi).replace('url(','').replace(')','')

Answer 4

登录以控制台所有background-imageURL，不带括号和引号：

var element = document.getElementById('divId');
var prop = window.getComputedStyle(element).getPropertyValue('background-image');
var re = /url\((['"])?(.*?)\1\)/gi;
var matches;
while ((matches = re.exec(prop)) !== null) {
    console.log(matches[2]);
}