将线性梯度拆分为一个对象[重复]答案

【问题标题】：Split linear-gradient into an object [duplicate]将线性梯度拆分为一个对象[重复]
【发布时间】：2017-12-13 06:00:09
【问题描述】：

我想将 linear-gradient 值拆分为带有键和值的 object。

我有这个：

linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1))

我想要这样：

linear-gradient: {
  angle: '10deg',
  color1: '#111',
  color2: 'rgba(111,11,11,0.4)',
  color3: 'rgba(255,255,25,0.1)',
}

已编辑：我尝试了我的代码但没有成功：

var str = 'linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1))';
str = str.match("gradient\((.*)\)");
str = str[1].split(',');
console.log( str );

【问题讨论】：

您是否尝试提取括号之间的字符串并用逗号分隔？
是的，但是当达到第一个 rgba 值时它会中断。我试过这样：str.split(',')
添加您尝试过的代码。
点击edit链接并将代码添加到问题本身。 How do I format my code blocks? 会帮助你。
我编辑并添加了我的代码，到达对象后我可以创建循环并将所有键值作为对象。

标签： javascript css object split linear-gradients

【解决方案1】：

使用Regular expression，我们可以从字符串中定义我们想要的部分。

// Define string
var str = 'linear-gradient(to left top, #F0F calc(30% - 6px), hsl(100, 100%, 25%) 75%, yellow)';

// Get string between first ( and last )
str = str.substring(str.indexOf('(') + 1, str.lastIndexOf(')'));

// Finally with regex we can get each parts separatelly
console.log( str.split( /,(?![^(]*\))(?![^"']*["'](?:[^"']*["'][^"']*["'])*[^"']*$)/ ) );

输出将是：

(4) [Array]
  "to left top"
  "#F0F calc(30% - 6px)"
  "hsl(100, 100%, 25%) 75%"
  "yellow"

【讨论】：

:-) 第一部分可以是角度或。 color-stops 也有一个，甚至可以通过设置。颜色可以用任何 CSS 值（红色、hsla(...)、...）定义。话虽这么说，您的正则表达式因"linear-gradient(to left top, #F0F calc(30% - 6px), hsl(100, 100%, 25%) 75%, yellow)" 而失败。
@Kaiido 回答已编辑；）
嗨，你能帮我看看 Swift 版本吗？谢谢