如何從rgb/rgba字符串獲取紅色的綠色和藍色值？

Question

如果我有字符串rgba(111,222,333,0.5)我如何可以提取單個顏色的字符串，即

red => 111 
green => 222 
blue => 333 
opacity => 0.5 

我想能夠使用這個整潔乾淨的解決方案，所以我假設一個正則表達式會最好？

Answer 1

我會避免正則表達式可預見的字符串，並建議：

var colorString = "rgba(111,222,333,0.5)", 
    colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/), 
    red = colorsOnly[0], 
    green = colorsOnly[1], 
    blue = colorsOnly[2], 
    opacity = colorsOnly[3]; 

JS Fiddle demo。

或者，因爲你希望它返回一個對象：

var colorString = "rgba(111,222,333,0.5)", 
    colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/), 
    components = {}; 
components.red = colorsOnly[0]; 
components.green = colorsOnly[1]; 
components.blue = colorsOnly[2]; 
components.opacity = colorsOnly[3]; 

console.log(colorsOnly, components);​ 

JS Fiddle demo。

Answer 2

的正則表達式，這將是：

^rgba\(([^,]+),([^,]+),([^,]+),([^,]+)\)$ 

Javascript代碼：

var regex = /^rgba\(([^,]+),([^,]+),([^,]+),([^,]+)\)$/g; 
var input = "rgba(111,222,333,0.5)"; 
if(regex.test(input)) { 
    var matches = input.match(regex); 
    for(var match in matches) { 
    alert(matches[match]); 
    } 
} else { 
    alert("No matches found!"); 
} 

您可能要修剪的比賽和/或值轉換爲數字，以獲得所需的RGBA值JavaScript的。

在RegexHero

玩這個如果正則表達式本身參數之間你想把手的空間，它可能會開始面色難看是這樣的：

^rgba\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*\)$ 

Answer 3

，如果它總是在RGBA格式，你可以做一些事情像這樣：

var str = 'rgba(111,222,333,0.5)' 

var red = str.substr(5,3); 
var green = str.substr(9,3); 
var red = str.substr(13,3); 

Answer 4

使大衛更簡單和expainatory

var colorString = "rgba(111,222,333,0.5)"; 
var colorsOnly = colorString.split(")"); //gives "rgba(111,222,333,0.5" at index 0 
var colorsOnly = colorString[0].split("("); //gives "111,222,333,0.5 at index 1 
var colorsOnly = colorString[1].split(","); 

給出 「111」[0]時， 「222」，在[1]， 「333」，在[2]和 「0.5」，在[3] 但注意：所有這些都具有字符串數據類型，因爲所有這些都是子字符串。

red = parseInt(colorsOnly[0]); 
green = parseInt(colorsOnly[1]); 
blue = parseInt(colorsOnly[2]); 
opacity = parseFloat(colorsOnly[3]); 

使用parseInt()和parseFloat()方法的字符串轉換成整數和浮點RESP。

Answer 5

對於艾哈邁德比拉爾的回答，我有些事要糾正。如果我錯了，請隨時糾正我！ :)

它應該是：

var colorsOnly = colorString.split(")"); 
    var colorsOnly = colorString.split("("); 
    var colorsOnly = colorsOnly[1].split(",");  

通知第四句的變化。由於ColosOnly從第三句已經代表了「（」分裂後的結果，所以我認爲它應該在第三句中是colorsOnly[1]，我自己試了一下並得到證實。

再次，如果我錯了，請也隨時糾正我！:)