Преобразование нескольких фоновых изображений в массив Javascript

Question

В CSS3 мы можем применять несколько фоновых изображений к элементу. Я хочу преобразовать эти несколько изображений в массив.

<div style="background-image:url('dg.png'), linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))"> 
</div> 

Я попытался в следующим образом, используя Jquery

$("div").css("background-image").split(",") 

, к сожалению, не работает, так как линейный градиент имеет , «с. И я пробовал вот так:

$("div").css('background-image').split("'),") 

ОК хорошо работал, но я думаю, что это ненадежное, есть ли надежное решение для этого. Он должен дать конечный результат, как массив, как показано ниже.

["url('dg.png')",'linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))'] 

Answer 1

Вы также можете использовать indexOf и slice методы Строка:

var strs = [ 
 
    'url("dg.png"), linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))', 
 
    'url("dg2.png"), linear-gradient(to right, rgb(178, 69, 146), rgb(241, 95, 121))' 
 
]; 
 
var results = []; 
 
function recursive(strings) { 
 
    var str = strings.shift(); 
 
    if (str) { 
 
    var first = str.indexOf('url'); 
 
    var second = str.indexOf('linear-gradient'); 
 
    var firstPart = str.slice(0, second - 2); 
 
    var result = []; 
 
    result.push(firstPart); 
 
    var secondPart = str.slice(second); 
 
    result.push(secondPart); 
 
    results.push(result); 
 
    return recursive(strings); 
 
    } 
 
    else { 
 
    return results; 
 
    } 
 
} 
 
console.log(recursive(strs));

Answer 2

Как отмечает @sinisake значения style отсутствует действительный css собственности.

Вы можете настроить html включать символы новой строки в style атрибута, используйте RegExp/background-image:,\n\s+/ в качестве параметра .split() разделить запятой, за которой следует символ новой строки следуют один или несколько космических charcters.

Обратите внимание, что двойные кавычки не должны быть внутри двойных кавычек. , Включая котировки вокруг URL-адреса, переданного в cssurl() функция не требуется; url() алгоритм окружает переданный URL в кавычках.

window.onload = function() { 
 
    var backgrounds = document.querySelector("div") 
 
        .getAttribute("style") 
 
        .split(/background-image:|,\n\s+/) 
 
        .filter(Boolean); 
 
        
 
    console.log(backgrounds); 
 
}

#background { 
 
    width:50px; 
 
    height:50px; 
 
}

<div id="background" 
 
    style='background-image:url("http://lorempixel.com/50/50"), 
 
      linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))'> 
 
</div>

Answer 3

Если ваш HTML код структурирован таким образом:

<div style="background-image:url('dg.png'), linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))"> 
</div> 

вы могли бы попробовать что-то вроде этого:

regex = /, (?=linear)|,(?=url)/g; 
    arr=[]; 
    $("div").each(function(i) { 
     arr[i]=$(this).css("background-image").split(regex); 

    }); 
     console.log(arr) 

regex = /, (?=linear)|,(?=url)/g; 
 
arr=[]; 
 
$("div").each(function(i) { 
 
    arr[i]=$(this).css("background-image").split(regex); 
 

 
}); 
 
    console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image:url('dg.png'), linear-gradient(to left, rgb(178, 69, 146), rgb(241, 95, 121))"> 
 
</div> 
 
<div style="background-image:url('333.png'),url('ggg'), linear-gradient(to left, rgb(200, 66, 146), rgb(241, 95, 121))"> 
 
</div> 
 
<div style="background-image:url('6666.png'),url('fff'), linear-gradient(to left, rgb(202, 32, 146), rgb(241, 95, 121))"> 
 
</div>

EDIT: regex = /, (?=linear)|,(?=url)/g;