给定一个有效CSS颜色值的字符串：
> #fff
> #ffffff
>白色
> rgb(255,255,255)
需要获得以下格式的数组：[R,G,B]
在JavaScript(假设主要浏览器)中最有效的方法是什么？
解决方法
function parseColor(input) {
var m;
显然,数值比名字更容易解析.所以我们先做这些.
m = input.match(/^#([0-9a-f]{3})$/i)[1];
if( m) {
// in three-character format,each value is multiplied by 0x11 to give an
// even scale from 0x00 to 0xff
return [
parseInt(m.charAt(0),16)*0x11,parseInt(m.charAt(1),parseInt(m.charAt(2),16)*0x11
];
}
那是一个现在为六位数格式：
m = input.match(/^#([0-9a-f]{6})$/i)[1];
if( m) {
return [
parseInt(m.substr(0,2),16),parseInt(m.substr(2,parseInt(m.substr(4,16)
];
}
现在为rgb()格式：
m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( m) {
return [m[1],m[2],m[3]];
}
或者,您还可以添加对rgba格式的支持,如果添加了HSL2RGB转换功能,甚至可以添加hsl / hsla.
最后,命名的颜色.
return ({
"red":[255,0],"yellow":[255,// ... and so on. Yes,you have to define ALL the colour codes.
})[input];
}
其实我不知道为什么我打扰写这些.我只是注意到你指定了“假设一个主要的浏览器”,我认为这也意味着“最新的”？如果是这样…
function parseColor(input) {
var div = document.createElement('div'),m;
div.style.color = input;
m = getComputedStyle(div).color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( m) return [m[1],m[3]];
else throw new Error("Colour "+input+" could not be parsed.");
}
最新的浏览器会将任何给定的颜色转换为rgb()格式的计算样式.把它拿回来,读出来.
