-2

This question differs from other questions before, in that here we have a STYLE inside a CLASS name. That made it a little more complicated to me.

I want to alert() ONLY the url of a image showing in the website, that is accessible with its class name:

    <div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>

I tried by doing:

alert( (document.querySelector('.image-container-image').textContent) );

Tried other different ways, but still no luck.

My output should be an alert showing the following url: "https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg"

Your guidance is very much appreciated.

David G.
  • 25
  • 9
  • 3
    Are you "Challenge"-ing us on Stack Overflow? Or did someone "Challenge" you? – Nate Jul 05 '17 at 19:56
  • 2
    I think [this answer](https://stackoverflow.com/a/14013171) may be able to help you. – Arman Peiravi Jul 05 '17 at 19:58
  • Could you include the different ways to tried to achieve the desired result ? I'm positive some regex could probably solve this issue. – Jeff Noel Jul 05 '17 at 20:00
  • Possible duplicate of [Javascript: Get background-image URL of
    ](https://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div)
     – ibrahim mahrir Jul 05 '17 at 20:02

4 Answers4

4

JavaScript (ES6), 121 89 bytes

One-liner, code-golf style:

alert(document.querySelector('.image-container-image').style.backgroundImage.slice(5,-2))
<div class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);"></div>

101 bytes alternative

getComputedStyle() works, even if the background-image exists in an external stylesheet:

alert(getComputedStyle(document.querySelector('.image-container-image')).backgroundImage.slice(5,-2))
.image-container-image{background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);}
<div class='image-container-image'></div>
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
0

You have the .style.backgroundImage on elements. You can use this with the substring function to get the url.

st =document.querySelector('.image-container-image').style.backgroundImage;
url = st.substring(5, st.length -2);

url would become https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg

EDIT If you want to you can change this to one line of code.

alert(document.querySelector('.image-container-image').style.backgroundImage.substring(5, document.querySelector('.image-container-image').style.backgroundImage.length -2))
<div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);"></div>
Pim
  • 850
  • 7
  • 17
0

Here is the solution:

// Get the image, style and the url from it
var img = document.getElementsByClassName('image-container-image')[0],
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1);

// For IE we need to remove quotes to the proper url
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the url to the user
alert('Image URL: ' + bi);
 <div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>
Atlas_Gondal
  • 2,512
  • 2
  • 15
  • 25
0

alert(document.querySelector('.image-container-image').style.backgroundImage.toString().replace(/(url|\(|\)|")/g, ''))
<div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>
Eugene Pulber
  • 41
  • 3