1

Não sou muito bom ainda de expressão regular. Como é que eu poderia fazer pra capturar apenas os conteúdos presentes dentro do trecho url() de background-image?

Exemplo:

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

Ou então:

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

Preciso de retornar, por Javascript puro ou jQuery, o seguinte para os casos:

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

Como fazer uma expressão regular para capturar isso?

6 Respostas 6

3

Uma forma que funcionaria com Regex(embora o código seja deselegante) seria:

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

Não conheço uma forma fazer com uma única expressão.

2

Pode ser feito assim:

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>
<div id="bg1"></div>
<div id="bg2"></div>

6
  • E quando tem dois url()? Por isso falei de expressão regular, pois sabia que não seria um simples replace. 28/10/2015 às 18:48
  • @ você quer pegar todas as url's do background-image e colocar em um array ? quer fazer isso quando carregar a página ? 28/10/2015 às 18:49
  • 1
    Sim, quero retornar todas num array. Montar um array com essas urls. Pois se tiver um, pega um. Se tiver mais de um, pega eles também. 28/10/2015 às 18:50
  • @WallaceMaxters como serão bg's diferentes adicionei duas div's e 2 bg's diferentes para exemplificar, da uma olhada no retorno... 28/10/2015 às 19:07
  • acho que você não entendeu quando disse "dois atributos url()". Veja o que pode ser feito em css: background-image: url(1.png), url(2.png), url(3.png); . Quero retornar ['1.png', '2.png', '3.png'] 28/10/2015 às 19:09
2

Aproveitando o exemplo postado pelo 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>

1
  • este código é o melhor, porém, por que aparece duas vezes a URL uma dentro de () e uma outra separada por , sem? tem como pegar só a que está fora do parentese?
    – flourigh
    28/03/2016 às 23:28
2

Pode ser feito assim:

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

Eu não utilizaria assim. Foi apenas demonstração;

1

Acredito que essa expressão regular deve resolver o problema:

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

veja funcionando aqui: http://regexr.com/3c35n

E aqui o exemplo, dando a saída do array:

http://jsfiddle.net/ivanferrer/wzbmsy9u/

Ou se preferir, algo mais simples, baseado somente na saída do background-image:

/([^url\(\)\,\'\"\;\s]+[A-z0-9])/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .