javascript - 如何从 style 属性获取图像 url

Question

我有 html DOM 像这样我想抓取图像url。

 <img src="constant/spacer.gif" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">

    <img src="constant/spacer.gif" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">

我的预期输出: ["https://example1.com/image/image1.png","https://example1.com/image/image1.png"] ;

现在我正在使用这段代码

arr = [];

$('.images-thumb').each(function(){

   arr.push($(this).attr('style')); // furthur i don't know 
});

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">

Furthur 我不知道如何准确抓取

["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];

请帮助我提前致谢

Answer 1

你可以这样做:

url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); 这将从字符串的开头删除 url(' 和 url(")(如果存在)和 ") 以及 ' ) 从末尾开始。

arr = [];

$('.images-thumb').each(function(){

   var $style = $(this).attr('style');
   var $url = $style.replace(/^background-image:url\(["']?/, '').replace(/["']?\)$/, '').replace(/\)/, '');
   arr.push($url); // further know you know :-P
});

console.log(arr);