Regular expression to get the background-image url

Navigation
1

I'm not very good yet at regular expression. How could I do to capture only the contents present within the% excerpt of url() ?

Example: 

$elemento.css('background-image'); // "url(imagem.png)"

Or else: 

$element.css('background-image'); // "url(imagem.png), url(imagem2.png)"

I need to return, by pure Javascript or jQuery, the following for cases: 

['imagem.png']
['imagem.png', 'imagem2.png']

How to make a regular expression to capture this?

    
asked by anonymous 28.10.2015 / 19:33

6 answers

3

One way that would work with Regex (although the code is inelegant) would be: 

"url(abc.png);url(xyz.png)".match(/url\((.*?)\)/g)
        .map(function(url){ 
             return url.replace(/url\(|\)/g, "") 
        });

I do not know a way to do with a single expression.

    
28.10.2015 / 20:33
2

It can be done like this: 

console.log(verificaBg());

function verificaBg() {
  var arrayBg = [];
  $.each($('div'), function(key, val) {
    arrayBg[key] = $(this).css('background-image').match(/\((.*?)\)/)[1].replace(/('|")/g,'');
  });
  return arrayBg;
}
#bg1 {
  background-image: url('http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');
  width: 276px;
  height: 110px;
}
#bg2 {
  background-image: url('http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59');
  width: 200px;
  height: 110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divid="bg1"></div>
<div id="bg2"></div>
    
28.10.2015 / 19:47
2

Taking advantage of the example posted by Gabriel Rodrigues. 

function verificaBg(id) {
  var arrayBg = [];
  var elemento = document.getElementById(id);
  var styles = window.getComputedStyle(elemento);
  var matchs = styles.getPropertyValue("background-image").match(/\((.*?)\)/);
  
  var urls = matchs.map(function (match, indice) {
    var url = match.replace(/('|")/g,'');
    return url;
  });
  
  return urls;
}

var array = verificaBg("bg1");
console.log(array);
#bg1 {
  background-image:
    url('http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif'),
    url('http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59');
  width: 276px;
  height: 110px;
}
<div id="bg1"></div>
    
28.10.2015 / 20:55
2

It can be done like this: 

var regex = /[-a-zA-Z0-9_.]*.png/g,
    results = [],
    html = $('div').css('background-image'),
    match;

while(match = regex.exec(html)) {
    results.push(match[0]);
}

console.log(results);

<div style="background-image:url(imagem1.png), url(imagem2.png), url(imagem3.png)"></div>
    
28.10.2015 / 21:16
1

Regex 

/url\(['"][^'"]+['"]\)/g

Pluguin 

(function($){
    $.fn.getUrlBackground = function(){
        var url = [];
        jQuery(this).each(function(){
            url[url.length] = jQuery(this).css('background-image').match(/url\(['"][^'"]+['"]\)/g);
        })
        return url;
    }
})(jQuery);

Obs

I would not use it that way. It was just demo;

    
28.10.2015 / 20:32
1

I think this regular expression should solve the problem: 

var css = 'background-image: url(1.png), url(2.png), url(3.png),  url("3.png"),  url('3.png');'
var regex = /[^background\-image\:\s,\"\'\(\)]+[^url(.+)]+[^\"\')]/gi

see it working here: link

And here's the example, giving the array output:

link

Or, if you prefer, something simpler, based only on background-image output: 

/([^url\(\)\,\'\"\;\s]+[A-z0-9])/
    
28.10.2015 / 21:00
Write current time in a .txt file How do you compare a string when it only has one space?