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

background-imageかっこや引用符なしで、すべての URL をコンソールに記録します。

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]);
}