Javascript get element background image BUT eliminate the "url()"

Question

Ive been working on an image gallery ive been creating myself and im adding a "Zoom in" feature to it.

I know im very close to succeeding but i have just one tiny issue. In Javascript i managed to get the background property of the image that will be enlarged but it grabs the image including the url(). I want to only get the URL (http:.../) EXCLUDING the url().

I hope this isn't very confusing but if you are, this is the link to my project. Click on the image to Zoom in, but it actually alerts the background-image property because i wanted to see what it fetches first.

Check it out

Is this possible?

Checkout my answer @xR34P3Rx, using regular expressions is the most safe way to do what you want. — user3998237
– user3998237, Commented Mar 20, 2015 at 20:00

Alexander Dayan · Accepted Answer · 2015-03-20 19:58:59Z

1

The most simple solution is the slice method. The first parameter specifies where to start the selection, the second specifies the end the selection from end of string if it's negative. So, your code should be:

var bkImg = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var bkImgUrl = bkImg.slice(4, -1);

answered Mar 20, 2015 at 19:58

Alexander Dayan

2,9341 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xR34P3Rx Over a year ago

just about the same as Alejandro's. Kudos to both of ya'll and everyone who helped!

Alejandro Iván · Accepted Answer · 2015-03-20 19:59:55Z

1

It would be better to just take the string inside the url() rather than using regular expressions or other stuff.

var url = "url(somefile.gif)";
var final_url = url.substr(4, url.length - 4 - 1);

Arguments: The initial position (starting from 0, that means fourth character is "s") and the number of characters that will create the new string (that is, the length of the original string minus 4 -the url( stuff- and minus 1 -the ) stuff-).

The result will be:

somefile.gif

Using it in your problem:

var url = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var final_url = url.substr(4, url.length - 4 - 1);
alert(final_url);

answered Mar 20, 2015 at 19:59

Alejandro Iván

4,0611 gold badge23 silver badges31 bronze badges

1 Comment

xR34P3Rx Over a year ago

This is the cleanest code of most of the others. Thanks, it worked like a charm!

score 1 · Accepted Answer · 2015-03-20 20:04:48Z

1

UPDATED

You can use a regular expression to take off the url( and the ) like this:

  var sourceimg = document.getElementById("image");
  var url = window.getComputedStyle(sourceimg, null).getPropertyValue("background-image");
  var urlWithoutUrl = url.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
  alert(urlWithoutUrl);

:)

edited Mar 20, 2015 at 20:04

answered Mar 20, 2015 at 19:52

user3998237

2 Comments

Alejandro Iván Over a year ago

I wouldn't call that a regular expression, because it's static. And also it will replace all ) parentheses, even if the image filename itself has them.

user3998237 Over a year ago

and now? :P @AlejandroIván

Casey ScriptFu Pharr · Accepted Answer · 2015-03-20 19:48:30Z

0

Use a regular expression, or substring from the position of

s.IndexOf("(")) + 1;

Thake everything after the "URL(" and then trim the last character to remove the ")".

answered Mar 20, 2015 at 19:48

Casey ScriptFu Pharr

1,6801 gold badge17 silver badges40 bronze badges

1 Comment

xR34P3Rx Over a year ago

How could i implement this in my code?

function viewFull(){     var sourceimg = document.getElementById("image");     var fetch =        window.getComputedStyle(sourceimg,null).getPropertyValue("background-image").IndexOf("url(");     alert(fetch); }

this is what i tried

Rise Ledger · Accepted Answer · 2015-03-20 19:58:33Z

0

here is the change you need to make in code:

alert(window.getComputedStyle(sourceimg,null).getPropertyValue("background-image").replace(/^url\((http.+)\)$/g, '$1'));

answered Mar 20, 2015 at 19:58

Rise Ledger

9697 silver badges11 bronze badges

Comments

guest271314 · Accepted Answer · 2015-03-20 20:43:33Z

0

Try

var url = $(el).css("backgroundImage").split(/\s|url\(|\)/).filter(Boolean)[0];

var url = $("body").css("backgroundImage").split(/\s|url\(|\)/).filter(Boolean)[0];
console.log(url);

body {
  width:300px;
  height:200px;
  background-image: url('http://lorempixel.com/300/200/technics/')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body></body>

edited Mar 20, 2015 at 20:43

answered Mar 20, 2015 at 19:57

guest271314

1

Collectives™ on Stack Overflow

Javascript get element background image BUT eliminate the "url()"

6 Answers 6

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related