2017-12-13 110 views
5

Tôi muốn chia giá trị linear-gradient thành object bằng khóa và giá trị.Tách gradient tuyến tính thành một đối tượng

Tôi có điều này:

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

Và tôi muốn nó như thế này:

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

EDITED: Tôi cố gắng mã của tôi không thành công:

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

Bạn đã thử để trích xuất chuỗi giữa ngoặc và chia nó bằng dấu phẩy? – Tushar

+0

Có, nhưng nó phá vỡ khi đạt đến giá trị rgba đầu tiên. tôi đã thử như thế này: str.split (',') – Behzad

+1

Thêm mã bạn đã thử. – Tushar

Trả lời

1

Với Regular expression chúng ta có thể xác định những phần chúng ta muốn từ chuỗi.

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

Và đầu ra sẽ là:

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

:-) phần đầu tiên có thể là góc hoặc . các điểm dừng màu cũng có một số thậm chí có thể được đặt qua một số . màu sắc có thể được xác định với bất kỳ giá trị CSS nào (đỏ, hsla (...), ...). Điều đó đang được nói, regex của bạn không thành công với '" linear-gradient (ở trên cùng bên trái, # F0F calc (30% - 6px), hsl (100, 100%, 25%) 75%, màu vàng) "'. – Kaiido

+0

@Kaiido answer edited;) – Behzad

Các vấn đề liên quan