2017-12-13 12 views
5

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)', 
} 

編集:私は成功せず、私のコードを試してみました:私たちが定義することができますRegular expression

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); 
+0

あなたは括弧の間の文字列を抽出しようとコンマでそれを分割しましたか? – Tushar

+0

はい、最初のrgba値に達するとブレークします。私はこのようにしてみました:str.split( '、') – Behzad

+1

あなたが試したコードを追加してください。 – Tushar

答えて

1

文字列からどんな部分が欲しいのですか?

// 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" 
+0

:-)最初の部分は、角度またはです。カラーストップもで、で設定することもできます。色は任意のCSS 値(赤、hsla(...)、...)で定義できます。つまり、あなたの正規表現は線形勾配(左上、#F0F calc(30%〜6px)、hsl(100,100%、25%)、黄色)で失敗します。 – Kaiido

+0

@Kaiido回答編集;) – Behzad

関連する問題