Get a color component from an rgb string in Javascript?
How about using a color library like the xolor library:
xolor("rgb(200,100,40)").r // returns the red part
much simpler way ..
var rgb = 'rgb(200, 12, 53)'.match(/\d+/g);
console.log(rgb);
and here comes the output as
["200", "12", "53"]
" simple is always beautiful ! " :)
NOTE - We're all on board with the regex ate my brains and kicked my dog attitude, but the regex version just seems the better method. My opinion. Check it out.
Non-regex method:
var rgb = 'rgb(200, 12, 53)';
rgb = rgb.substring(4, rgb.length-1)
.replace(/ /g, '')
.split(',');
console.log(rgb);
http://jsfiddle.net/userdude/Fg9Ba/
Outputs:
["200", "12", "53"]
Or... A really simple regex:
EDIT: Ooops, had an i
in the regex for some reason.
var rgb = 'rgb(200, 12, 53)';
rgb = rgb.replace(/[^\d,]/g, '').split(',');
console.log(rgb);
http://jsfiddle.net/userdude/Fg9Ba/2
My version takes a HEX
, RGB
or RGBa
string as an argument, uses no regEx, and returns an object with red, green, and blue (and alpha for RGBa
) number-values.
var RGBvalues = (function() {
var _hex2dec = function(v) {
return parseInt(v, 16)
};
var _splitHEX = function(hex) {
var c;
if (hex.length === 4) {
c = (hex.replace('#','')).split('');
return {
r: _hex2dec((c[0] + c[0])),
g: _hex2dec((c[1] + c[1])),
b: _hex2dec((c[2] + c[2]))
};
} else {
return {
r: _hex2dec(hex.slice(1,3)),
g: _hex2dec(hex.slice(3,5)),
b: _hex2dec(hex.slice(5))
};
}
};
var _splitRGB = function(rgb) {
var c = (rgb.slice(rgb.indexOf('(')+1, rgb.indexOf(')'))).split(',');
var flag = false, obj;
c = c.map(function(n,i) {
return (i !== 3) ? parseInt(n, 10) : flag = true, parseFloat(n);
});
obj = {
r: c[0],
g: c[1],
b: c[2]
};
if (flag) obj.a = c[3];
return obj;
};
var color = function(col) {
var slc = col.slice(0,1);
if (slc === '#') {
return _splitHEX(col);
} else if (slc.toLowerCase() === 'r') {
return _splitRGB(col);
} else {
console.log('!Ooops! RGBvalues.color('+col+') : HEX, RGB, or RGBa strings only');
}
};
return {
color: color
};
}());
console.debug(RGBvalues.color('rgb(52, 86, 120)'));
//-> { r: 52, g: 86, b: 120 }
console.debug(RGBvalues.color('#345678'));
//-> { r: 52, g: 86, b: 120 }
console.debug(RGBvalues.color('rgba(52, 86, 120, 0.67)'));
//-> { r: 52, g: 86, b: 120, a: 0.67 }
console.debug(RGBvalues.color('#357'));
//-> { r: 51, g: 85, b: 119 }
Might be useful to someone. :)