分隔红绿蓝值的rgba颜色值

seperate Red Green Blue value of rgba Colur value

本文关键字：rgba 颜色值 分隔      更新时间：2023-09-26

我'hv rgba值在这种格式RGBA(205,31,31,1)和我想分开每个红色，绿色，蓝色和alpha值进行进一步处理我如何使用jQuery实现它;所以输出看起来像

red = 205
green = 31
blue = 31
alpha =1

从字符串变量中获取这些值很容易，因此您不需要jQuery

在regex的帮助下，您可以轻松地实现 
var color = "RGBA(205,31,31,1)";
var regExp = /'(([^)]+)')/;  // get the values within ()
var matches = regExp.exec(color);
var splits = matches[1].split(',');
alert("red: " + splits[0] + "green: " + splits[1]+ "blue: "+ splits[2]+ "alpha: " +splits[3] );

JSFiddle

然而，要从元素获取rgba值，你可以使用jQuery的css方法。

不带正则表达式:

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];

var string = "RGBA(205,31,31,1)";
var colors = [];
string = string.replace(/[rgba'(')]/gi, '');  // remove unnecessary characters
string = string.split(",");   // split by comma
for(var i = 0;i < string.length; i++){  
    colors.push(parseFloat(string[i], 10));  // parse the integer and push in colors array
}

console.log(colors); // [ 205, 31, 31, 1 ] the values are in RGBA order

一个简单的现代方法:

"RGBA(205,31,31,1)".match(/['d'.]+/g).map(Number); //==[205, 31, 31, 1]

或者如果你想要一个对象，这就有点麻烦了:

"RGBA(205,31,31,1)".match(/['d'.]+/g).map(Number)
  .reduce(function(a,b,i){  
       a[["red","blue","green","alpha"][i]]=b; 
     return a;  
  }, {}); // ==  {red: 205, blue: 31, green: 31, alpha: 1}

使用".match()很好，因为它忽略了数字之间的空格和"rgba"文本的大小写。

相关文章：