Question

我正在使用Javascript和Canvas制作绘画应用，并使用此格式的字符串来指定所选颜色：

"rgb(255,0,0)"

因为canvas上下文fillStyle属性接受该格式的字符串。

但是，我现在需要从这个字符串中获取单个组件，并且想知道是否有办法在没有混乱的字符串操作的情况下执行此操作。可能有一些内置的方法将该字符串转换为某种颜色对象，然后访问其r，g和b组件？

感谢。

Answer 1

注意 - 我们全都参与了正则表达式吃了我的大脑并踢了我的狗态度，但正则表达式版似乎是更好的方法。我的看法。看看吧。

非正则表达法：

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.substring(4, rgb.length-1)
         .replace(/ /g, '')
         .split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/

输出：

["200", "12", "53"]

或者......一个非常简单的正则表达式：

编辑：哎呀，出于某种原因在正则表达式中有一个i。

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.replace(/[^\d,]/g, '').split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/2

Answer 2

更简单的方式..

    var rgb = 'rgb(200, 12, 53)'.match(/\d+/g);
    console.log(rgb);

输出为

    ["200", "12", "53"]

“ 简单永远是美丽的 ！”：）

Answer 3

如何使用像the xolor library这样的颜色库：

xolor("rgb(200,100,40)").r // returns the red part

Answer 4

我的版本将HEX，RGB或RGBa字符串作为参数，不使用regEx，并返回带有红色，绿色和蓝色的对象（以及{{的{ 1}}）数字值。

RGBa

可能对某人有用。：）

Answer 5

即使您确定颜色是rgb格式，而不是rgbA，十六进制，颜色名称或hsl，您仍然可以使用'rgb（25％，55％，100％）'。

function Rgb(rgb){
    if(!(this instanceof Rgb)) return new Rgb(rgb);
    var c= rgb.match(/\d+(\.\d+)?%?/g);
    if(c){
        c= c.map(function(itm){
            if(itm.indexOf('%')!= -1) itm= parseFloat(itm)*2.55;
            return parseInt(itm);
        });
    }
    this.r= c[0];
    this.g= c[1];
    this.b= c[2];
}

var c = Rgb（'rgb（10％，25％，55％）'）; 警报（[c.r，c.g，c.b]）

注意 - 如果您使用的是画布，则可以使用地图。

否则 -

Array.prototype.map=Array.prototype.map || function(fun, scope){
        var T= this, L= T.length, A= Array(L), i= 0;
        if(typeof fun== 'function'){
            while(i<L){
                if(i in T){
                    A[i]= fun.call(scope, T[i], i, T);
                }
                ++i;
            }
            return A;
        }
    }

Answer 6

如果您对 RGB(A) 作为数值感兴趣：

const [r,g,b,a] = "rgb(50,205,50)".match(/\d+/g).map(Number);

如果字符串中只有 3 个数字，则注意 alpha (a) 是未定义的！

Answer 7

对于使用颜色选择器的人，此库还允许转换多种格式的颜色：https://tovic.github.io/color-picker/

CP.RGB2HEX([255, 255, 255])

Answer 8

Mozilla Fathom 中实现了一种（某种）简单的正则表达式解决方案，它也可以识别 alpha：

/**
 * Return the extracted [r, g, b, a] values from a string like "rgba(0, 5, 255, 0.8)",
 * and scale them to 0..1. If no alpha is specified, return undefined for it.
 */
export function rgbaFromString(str) {
    const m = str.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/i);
    if (m) {
        return [m[1] / 255, m[2] / 255, m[3] / 255, m[4] === undefined ? undefined : parseFloat(m[4])];
    } else {
        throw new Error('Color ' + str + ' did not match pattern rgb[a](r, g, b[, a]).');
    }
}

从Javascript中的rgb字符串中获取颜色组件？

8 个答案: