2017-12-13 32 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