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

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

在RegexHero

播放

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

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

Answer 3

让大卫变得更加简单和彰显

 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(",");

在[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]);

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

Answer 4

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

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

应该是：

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

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

再次，如果我错了，请随时纠正我！：）

Answer 6

这是另一种解决方案。

const rgbaStrToValues = function( rgba ) {
    const realNumPattern = '([+-]?\\d*\\.?\\d+)';
    const rgbaPattern = `rgba?\\(` +
        ` *${ realNumPattern } *, *${ realNumPattern } *,` +
        ` *${ realNumPattern } *(?:, *${ realNumPattern } *)?\\)`;
    const regexp = new RegExp( rgbaPattern );
    const result = regexp.exec( rgba );
    if ( ! result ) { return; }

    const { 1: red, 2: green, 3: blue, 4: alpha } = result;
    if ( ! ( red && green && blue ) ) { return; }

    const { min, max } = Math;
    return {
        red  : max( min( Number( red ), 255 ), 0 ),
        green: max( min( Number( green ), 255 ), 0 ),
        blue : max( min( Number( blue ), 255 ), 0 ),
        alpha: alpha ? max( min( Number( alpha ), 1 ), 0 ) : 1,
    };
};

rgbaStrToValues( 'rgba( 111, 222, 333, 0.5 )' );

我用日语写了这段代码的描述

'rgb[a](R, G, B[, A])' を正規表現で処理して、各値をメンバーとしてもつオブジェクトを返す関数。 - Qiita

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

6 个答案: