How to get the image url from a css string.

Question

I am having an issue where I am trying to get the image url from the string.

An example of a string would be:

@media only screen and (max-width: 47.938em) { 
  .screen__start__play-btn::after { content: " "; display: block; height: 25px; position: relative; width: 100%; background-image: url(http://localhost:8080/_client/images/mouseover-line.png); background-size: cover; background-repeat: no-repeat; }
} - as a string

Here is a snippet of my code:

var cssPropertiesObj = {
    mediaQuery: ['47.938em'],//media query array function get these results
    css: ['@media only screen and (max-width: 47.938em) { 
      .screen__start__play-btn::after { content: " "; display: block; height: 25px; position: relative; width: 100%; background-image: url(http://localhost:8080/_client/images/mouseover-line.png); background-size: cover; background-repeat: no-repeat; }
    }'] // get css of each media query
};


function removeUnwantedMedia(mediaQuery, css, arrayLength) {
    var startString = css.indexOf('url(');
    var endString = css.indexOf(')');

    if(css.indexOf('url(') === -1) {
        cssPropertiesObj.mediaQuery.splice(arrayLength, 1);
        cssPropertiesObj.css.splice(arrayLength, 1);
    } else {
        css.substring(startString, endString);
        console.log(css.substring(startString, endString));
    }
    console.log(css);
}
var i;
for(i = 0; i < cssPropertiesObj.mediaQuery.length; i++){
    removeUnwantedMedia(cssPropertiesObj.mediaQuery[i], cssPropertiesObj.css[i], i);
}

What I am expecting the cssPropertiesObj.css[0] is to be equal to 'http://localhost:8080/_client/images/mouseover-line.png' without all the css jargon.

Is this possible to do in JS?

Andrii Iushchuk · Accepted Answer · 2015-09-28 12:38:41Z

1

You can use /background-image: url\((.*)\)\;/ regex to get background image url from string:

var matches = cssPropertiesObj.css[0].match(/background-image: url\((.*)\)\;/);
if (matches) {
  cssPropertiesObj.css[0] = matches[1]
}

answered Sep 28, 2015 at 12:38

Andrii Iushchuk

3761 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How to get the image url from a css string.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related