2017-12-13 136 views
5

linear-gradient değerini anahtar ve değer ile object'a bölmek istiyorum.Doğrusal degradeyi bir nesneye bölme

bu var:

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

Ve ben böyle istiyorum:

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

EDITED: Regular expression ile

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

parantez arasına dize ayıklamak için çalıştı mı ve virgül ile ayrılır? – Tushar

+0

Evet, ancak ilk rgba değerine ulaştığında kırılıyor. Ben böyle denedim: str.split (',') – Behzad

+1

Denediğiniz kodu ekleyin. – Tushar

cevap

1

biz tanımlayabiliriz: Ben başarılı olamadı kodumu çalıştı dize hangi parçaları istiyoruz.

// 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(/,(?![^(]*\))(?![^"']*["'](?:[^"']*["'][^"']*["'])*[^"']*$)/)); 

Ve çıkış olacaktır:

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

:-) ilk bölüm açıya veya olabilir. renk durakları da aracılığıyla ayarlanabilen bir 'a sahiptir. renkler herhangi bir CSS değeriyle tanımlanabilir (kırmızı, hsla (...), ...). Bu söyleniyor, senin regex "doğrusal-gradyan (sol üst, # F0F kalk (% 30 - 6px), hsl (100,% 100,% 25)% 75, sarı" ile başarısız olur. – Kaiido

+0

@Kaiido cevabı düzenlenmiş;) – Behzad