在 JavaScript 中解析 CSS 颜色的最有效方法是什么? [英] What is the most efficient way to parse a CSS color in JavaScript?
问题描述
给定一个有效的 CSS 颜色值的字符串:
- #fff
- #ffffff
- 白色
- rgb(255, 255, 255)
需要得到如下格式的数字数组:[R, G, B]
在 JavaScript 中执行此操作的最有效方法是什么(假设使用主流浏览器)?
function parseColor(input) {无功米;
显然,数值比名称更容易解析.所以我们先做这些.
m = input.match(/^#([0-9a-f]{3})$/i)[1];如果(米){//在三字符格式中,每个值乘以 0x11 得到一个//甚至从 0x00 缩放到 0xff返回 [parseInt(m.charAt(0),16)*0x11,parseInt(m.charAt(1),16)*0x11,parseInt(m.charAt(2),16)*0x11];}
就是一个.现在是完整的六位数格式:
m = input.match(/^#([0-9a-f]{6})$/i)[1];如果(米){返回 [parseInt(m.substr(0,2),16),parseInt(m.substr(2,2),16),parseInt(m.substr(4,2),16)];}
现在是 rgb()
格式:
m = input.match(/^rgbs*(s*(d+)s*,s*(d+)s*,s*(d+)s*)$/i);如果(米){返回 [m[1],m[2],m[3]];}
可选地,您还可以添加对 rgba
格式的支持,如果添加 HSL2RGB 转换功能,甚至可以添加对 hsl
/hsla
的支持.>
最后,命名颜色.
返回 ({红色":[255,0,0],黄色":[255,255,0],//... 等等.是的,您必须定义所有颜色代码.})[输入];
并关闭函数:
<代码>}
<小时>
实际上,我不知道我为什么要写这么多.我刚刚注意到您指定了假设使用主要浏览器",我假设这也意味着最新"?如果是这样...
function parseColor(input) {var div = document.createElement('div'), m;div.style.color = 输入;m = getComputedStyle(div).color.match(/^rgbs*(s*(d+)s*,s*(d+)s*,s*(d+)s*)$/i);if(m) 返回 [m[1],m[2],m[3]];else throw new Error("颜色"+input+"无法解析.");}
最新的浏览器会将任何给定的颜色转换为其计算样式的 rgb()
格式.把它拿回来,然后读出来.
Given a string of a valid CSS color value:
- #fff
- #ffffff
- white
- rgb(255, 255, 255)
Need to get an array of numbers of the following format: [R, G, B]
What is the most efficient way of doing this in JavaScript (assuming a major browser)?
function parseColor(input) {
var m;
Obviously, the numeric values will be easier to parse than names. So we do those first.
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),16)*0x11,
parseInt(m.charAt(2),16)*0x11
];
}
That's one. Now for the full six-digit format:
m = input.match(/^#([0-9a-f]{6})$/i)[1];
if( m) {
return [
parseInt(m.substr(0,2),16),
parseInt(m.substr(2,2),16),
parseInt(m.substr(4,2),16)
];
}
And now for rgb()
format:
m = input.match(/^rgbs*(s*(d+)s*,s*(d+)s*,s*(d+)s*)$/i);
if( m) {
return [m[1],m[2],m[3]];
}
Optionally, you can also add support for rgba
format, and even hsl
/hsla
if you add an HSL2RGB conversion function.
Finally, the named colours.
return ({
"red":[255,0,0],
"yellow":[255,255,0],
// ... and so on. Yes, you have to define ALL the colour codes.
})[input];
And close the function:
}
Actually, I don't know why I bothered writing all that. I just noticed you specified "assuming a major browser", I'm assuming that also means "up-to-date"? If so...
function parseColor(input) {
var div = document.createElement('div'), m;
div.style.color = input;
m = getComputedStyle(div).color.match(/^rgbs*(s*(d+)s*,s*(d+)s*,s*(d+)s*)$/i);
if( m) return [m[1],m[2],m[3]];
else throw new Error("Colour "+input+" could not be parsed.");
}
An up-to-date browser will convert any given colour to rgb()
format in its computed style. Just get it back, and read it out.
这篇关于在 JavaScript 中解析 CSS 颜色的最有效方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!