CODEWITHSUNDEEP
javascriptjquerynode.js
Dilip G
Dilip G

Reputation: 529

how to get image url from style attribute

i have html DOM like this i want to grab image 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">

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

right now i'm using this code

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 i don't know how to exactly grab

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

please help me thanks in advance

Upvotes: 2

Views: 2015

Answers (5)

Akansh
Akansh

Reputation: 1785

You can simply use 

var images = document.querySelectorAll('.images-thumb');
  var image, arr=[];
  for(var i=0; i<images.length;i++){
    image = window.getComputedStyle(images[i]).backgroundImage;
    arr.push(image.substr(5, image.length-7));
  }
console.log(arr);

Pure JS method to grab all the styles of the element.

Upvotes: 1

Arun CM
Arun CM

Reputation: 3435

You can use JQuery css("background-image") selector and regular expression to get the desired result.

arr = [];

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

   arr.push($(this).css("background-image").replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, ''));
});

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">

Upvotes: 0

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

Replace the unwanted text with empty string "" :

Example snippet:

arr = [];

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

  arr.push($(this).css("background-image").replace("url(\"", "").replace("\")", ""));
});

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">

Upvotes: 0

shivgre
shivgre

Reputation: 1173

You could do:

url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); This will remove url(' and url(" from the beginning of the string if it is present and ") resp. ') from the end.

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

Upvotes: 2

Lego
Lego

Reputation: 35

    You can give the image path in src attribute, otherwise the script will be like below

  arr = [];

$('.images-thumb').each(function(){
  var txt = $(this).attr('style');
  first = txt.indexOf('(');
    second = txt.indexOf(')');
    arr.push(txt.substr(first+1,second-first-1));
});
console.log(arr);
Just check once

Upvotes: 0

Related Questions