Javascript：获取<div> </div>的背景图片网址

Question

如何在JavaScript中获取background-image元素的<div>网址？ 例如，我有这个：

<div style="background-image:url('http://www.example.com/img.png');">...</div>

如何 <{1}}？

的网址

Answer 1

你可以试试这个：

var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Get the image id, style and the url from it
var img = document.getElementById('testdiv'),
  style = img.currentStyle || window.getComputedStyle(img, false),
  bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the url to the user
console.log('Image URL: ' + bi);

<div id="testdiv" style="background-image:url('http://placehold.it/200x200');"></div>

修改

根据@Miguel和下面的其他评论，如果您的浏览器（IE / FF / Chrome ...）将其添加到网址，您可以尝试删除其他引号：

bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

如果它可能包含单引号，请使用：replace(/['"]/g, "")

<强> DEMO FIDDLE

Answer 2

只是为了增加这个以防其他人有类似的想法，你也可以使用正则表达式：

var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];

然而，根据jsPerf，@ Praveen的解决方案在Safari和Firefox中的表现似乎更好：http://jsperf.com/match-vs-slice-and-replace

如果您想说明价值包含报价但不确定是双引号还是单引号的情况，您可以这样做：

var url = backgroundImage.slice(4, -1).replace(/["']/g, "");

Answer 3

试试这个：

var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));

或者，使用replace

url.replace('url(','').replace(')','');

Answer 4

首先，您需要返回背景图片内容：

var img = $('#your_div_id').css('background-image');

这将返回以下URL：

＆＃34; URL（＆＃39; http://www.example.com/img.png＆＃39;）＆＃34;

然后您需要删除此网址中不需要的部分：

img = img.replace(/(url\(|\)|")/g, '');

Answer 5

const regex = /background-image:url\(["']?([^"']*)["']?\)/gm;
const str = `<div style="background-image:url('http://www.example.com/img.png');">...</div>`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

Answer 6

登录控制台所有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]);
}