如何从rgb / rgba字符串中获取红色绿色和蓝色值？

If I have the string rgba(111,222,333,0.5) how can i extract the individual colours from the string, i.e.

如果我有字符串rgba（111,222,333,0.5）我怎样才能从字符串中提取单个颜色，即

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

I would like to be able to use a neat clean solution for this so I am assuming a regular expression would be best?

我希望能够使用一个干净整洁的解决方案，所以我假设一个正则表达式是最好的？

5 个解决方案

#1

I'd avoid regex for a predictable string, and suggest:

我会为可预测的字符串避免使用正则表达式，并建议：

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.

JS小提琴演示。

Or, given that you want an object returned:

或者，假设您想要返回一个对象：

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.

JS小提琴演示。

#2

The Regex for this would be:

正则表达式将是：

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

Javascript code:

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!");
}

You may want to trim the matches and/or convert the values to numbers to get the required RGBA values in JavaScript.

您可能希望修剪匹配和/或将值转换为数字以在JavaScript中获取所需的RGBA值。

Play with this at RegexHero

在RegexHero玩这个

If you wanna handle spaces between parameters in the regex itself, it may start looking ugly like this:

如果你想在正则表达式本身中处理参数之间的空格，它可能会开始看起来像这样丑陋：

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

#3

making to david more simpler and 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(","); 

gives "111" at [0], "222" at [1], "333" at [2] and "0.5" at [3] but NOTE: all of these have string data types as all of these are subStrings.

在[0]给出“111”，在[1]给出“222”，在[2]给出“333”，在[3]给出“0.5”但注意：所有这些都有字符串数据类型，因为所有这些都是subStrings。

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

use parseInt() and parseFloat() methods to convert the strings into integer and float resp.

使用parseInt（）和parseFloat（）方法将字符串转换为整数和浮点数。

#4

if it's always in rgba format you can do something like this:

如果它始终采用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);

#5

For Ahmed Bilal's answer, I have something to correct. If I am wrong, please also feel free to correct me! :)

对于Ahmed Bilal的回答，我有一些事情要纠正。如果我错了，请随时纠正我！ :)

It should be:

它应该是：

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

Notice the change of the fourth sentence. Since ColosOnly from the third sentence has represented the outcomes after the "(" splitting. So I think it should be colorsOnly[1] in the third sentence. I tried it on myself and got proved.

注意第四句的变化。由于第三句中的ColosOnly代表了“（”分裂后的结果。所以我认为它应该是第三句中的colorsOnly [1]。我在自己身上试过并得到证明。

Again, if I am wrong, please also feel free to correct me! :)

再次，如果我错了，请随时纠正我！ :)