将多个背景图像转换为数组Javascript

在CSS3中，我们可以对一个元素应用多个背景图像。我想将这些多个图像转换为一个数组

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

不幸的是，这不起作用，因为线性梯度也有

，

。我试着这样做

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

好的，很好，但我认为这是不可靠的，有任何可靠的解决方案。它应该像下面所示的数组一样给出最终输出

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

您还可以使用字符串的名称和方法：

var strs=[
“url（“dg.png”）、线性渐变（向左、rgb（178、69、146）、rgb（241、95、121）），
“url（“dg2.png”）、线性渐变（向右、rgb（178、69、146）、rgb（241、95、121））”
];
var结果=[]；
函数递归（字符串）{
var str=strings.shift（）；
如果（str）{
var first=str.indexOf（'url'）；
var second=str.indexOf（“线性梯度”）；
var firstPart=str.slice（0，second-2）；
var结果=[]；
结果：推送（第一部分）；
var secondPart=str.slice（第二）；
结果：推送（第二部分）；
结果。推（结果）；
返回递归（字符串）；
} 
否则{
返回结果；
}
}
log（递归（strs））如@sinisake所述，
样式
值缺少有效的
css
属性

您可以调整
html
以在
style
属性中包含换行符，使用
RegExp
/background image:，\n\s+/
作为
.split（）
的参数来拆分逗号，后跟换行符，后跟一个或多个空格字符

请注意，双引号不应位于双引号内，不需要在传递给
css
URL（）
函数的URL周围加引号<代码>url（）

算法将传递的url用引号括起来

window.onload=function（）{
var backgrounds=document.querySelector（“div”）
.getAttribute（“样式”）
.split（/background image:|，\n\s+/）
.过滤器（布尔值）；
控制台日志（背景）；
}

#背景{
宽度：50px；
高度：50px；
}

---

如果您的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”）。每个（功能（i）{
arr[i]=$（this.css（“背景图像”）.split（regex）；
});
控制台日志（arr）

您是否拥有/维护HTML代码？如果是这样，为什么不将背景图像作为数组启动，然后将它们组合到CSS属性中？使用

for

循环遍历数组元素，并将它们加上

，

附加到背景图像属性的末尾。这真的是您的内联样式吗？它根本不是有效的html/内联样式$css（“背景图像”）不会产生任何东西，在这种情况下…@sinisake很好。一开始没有注意到

style

属性中有效的

css

属性被省略。@Joshua你想同时显示两幅图像吗？很好，但是如果我们有两个以上的背景呢。那么你想在不同的元素中处理几个背景，对吗？是的，我想在你的逻辑中加入一个for循环，所以我们可以实现它。好的，像这样的事情吗？对不起，我不得不修改我的答案，希望现在能有更多帮助。谢谢，我运行了一个测试用例，如下

str=“url（'dg.png'）、url（'ap.svg'）、线性渐变（向左，rgb（178，69，146）、rgb（241，95，121）、线性渐变（top，#fff，#000）“str.split（regex）

它给出了与

[“url>不同的结果（'dg.png'）、url（'ap.svg'）、“线性渐变（向左，rgb（178、69、146）、rgb（241、95、121）、线性渐变（top，#fff，#000）”）

好吧，如果你有多个url，那么需要一些额外的条件，用于字符串检查，或者可能更灵活的正则表达式…@Joshna，请尝试新的代码/正则表达式…现在它也应该涵盖你的测试字符串/样式。。。

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