有効な CSS カラー値の文字列を指定すると、次のようになります。
- #fff
- #ffffff
- 白い
- RGB(255, 255, 255)
次の形式の数値の配列を取得する必要があります: [R, G, B]
JavaScriptでこれを行う最も効率的な方法は何ですか(主要なブラウザを想定)?
23734 次
11 に答える
32
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),16)*0x11,
parseInt(m.charAt(2),16)*0x11
];
}
それは1つです。完全な6桁の形式の場合：
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)
];
}
そして今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,0],
"yellow":[255,255,0],
// ... 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*,\s*(\d+)\s*\)$/i);
if( m) return [m[1],m[2],m[3]];
else throw new Error("Colour "+input+" could not be parsed.");
}
最新のブラウザは、任意の色をrgb()計算されたスタイルの形式に変換します。取り戻して、読んでください。
于 2012-06-17T01:32:45.830 に答える
19
より迅速で効率的な方法
@NiettheDarkAbsol の正解に加えて、いくつかの側面があります。
backgroundColor は、
rgb( 3 values )またはrgba( 4 values)match関数は素晴らしいですが、正規表現を使用するとコストがかかります!split可能な限り、代わりに優先してください。
この関数はより簡単で迅速です:
function parseColor(input) {
return input.split("(")[1].split(")")[0].split(",");
}
戻り値は依然として文字列であり、不要なスペースが含まれていますが、数式で使用すると正しく機能します!
とにかく、私はこれを好みます: それらはそのまま含まれている可能性があります:
var bgColors = document.getElementById('myDiv').
backgroundColor.split("(")[1].split(")")[0].split(",");
Emile Bergeron のコメントで提案されたサポート#RnGnBnフォーム (IEx)
rgb(r,g,b)、rgba(r,g,b,a)、#RGB、#RRGGBBおよびを操作する小さくて簡単な関数があり#RRRGGGBBBます。
function parseColor(input) {
if (input.substr(0,1)=="#") {
var collen=(input.length-1)/3;
var fact=[17,1,0.062272][collen-1];
return [
Math.round(parseInt(input.substr(1,collen),16)*fact),
Math.round(parseInt(input.substr(1+collen,collen),16)*fact),
Math.round(parseInt(input.substr(1+2*collen,collen),16)*fact)
];
}
else return input.split("(")[1].split(")")[0].split(",").map(x=>+x);
}
デモ
function parseColor(input) {
if (input.substr(0,1)=="#") {
var collen=(input.length-1)/3;
var fact=[17,1,0.062272][collen-1];
return [
Math.round(parseInt(input.substr(1,collen),16)*fact),
Math.round(parseInt(input.substr(1+collen,collen),16)*fact),
Math.round(parseInt(input.substr(1+2*collen,collen),16)*fact)
];
}
else return input.split("(")[1].split(")")[0].split(",").map(x=>+x);
}
[ "rgb(123,45,67)", "rgb( 123, 45 , 67 )", "rgba(123,45,67,0.5)", "#F70",
"#FF7700", "#FFF777000", "#FF8000", "#FFF800000", "#F80" ].forEach(
function(color){
colors=parseColor(color);
if (colors.length<4) colors.push('1.0');
document.getElementById('out').innerHTML+=
'<tr><td style="background:'+color+';" />'+
'<td>'+ colors.join('</td><td>')+'</td>'+
'<td>parseColor("'+color+'");</td></tr>';
}
);th { width: 3em; }<table id="out" style="font-family: mono;background:SlateGrey">
<tr><th></th><th>Red</th><th>Green</th><th>Blue</th><th>Alpha</th><th>Code</th></tr>
</table>于 2014-02-23T08:48:32.270 に答える
5
kennebec は Kolink の回答をほぼ完成させましたが、改善すべき点がいくつかあります。まず、hsla と rgba をサポートできます。その際、常にアルファ値を返すことが最善です。着信引数文字列にトリム メソッドを適用することによって、もう 1 つのマイナーな改善が行われます。
function parseColor(color) {
color = color.trim().toLowerCase();
color = _colorsByName[color] || color;
var hex3 = color.match(/^#([0-9a-f]{3})$/i);
if (hex3) {
hex3 = hex3[1];
return [
parseInt(hex3.charAt(0),16)*0x11,
parseInt(hex3.charAt(1),16)*0x11,
parseInt(hex3.charAt(2),16)*0x11, 1
];
}
var hex6 = color.match(/^#([0-9a-f]{6})$/i);
if (hex6) {
hex6 = hex6[1];
return [
parseInt(hex6.substr(0,2),16),
parseInt(hex6.substr(2,2),16),
parseInt(hex6.substr(4,2),16), 1
];
}
var rgba = color.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+.*\d*)\s*\)$/i) || color.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( rgba ) {
return [rgba[1],rgba[2],rgba[3], rgba[4]===undefined?1:rgba[4]];
}
var rgb = color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if( rgb ) {
return [rgb[1],rgb[2],rgb[3],1];
}
if(color.indexOf('hsl')== 0)
return _hslToRgb(color);
}
function _hslToRgb(hsl){
if(typeof hsl== 'string'){
hsl= hsl.match(/(\d+(\.\d+)?)/g);
}
var sub, h= hsl[0]/360, s= hsl[1]/100, l= hsl[2]/100, a = hsl[3]===undefined?1:hsl[3], t1, t2, t3, rgb, val;
if(s== 0){
val= Math.round(l*255);
rgb= [val, val, val, a];
}
else{
if(l<0.5)
t2= l*(1 + s);
else
t2= l + s - l*s;
t1 = 2*l - t2;
rgb = [0, 0, 0];
for(var i=0; i<3; i++){
t3 = h + 1/3 * -(i - 1);
t3 < 0 && t3++;
t3 > 1 && t3--;
if (6 * t3 < 1)
val= t1 + (t2 - t1) * 6 * t3;
else if (2 * t3 < 1)
val= t2;
else if (3*t3<2)
val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
else
val= t1;
rgb[i] = Math.round(val*255);
}
}
rgb.push(a);
return rgb;
}
var _colorsByName = {aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",
black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",
chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",
darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",
darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",
darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",
deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",
fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",
greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred :"#cd5c5c",indigo :"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",
lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",
lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",
lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",
limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",
mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",
mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",
navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",
orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",
peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",
royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",
silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",
tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",
whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"
};
于 2013-10-14T17:57:17.450 に答える
3
// これは、投稿したサンプルの [red.green,blue] 10 進配列と RGB パーセンテージを返します。
// 透明度、hsl、およびほとんどのブラウザーがサポートする色名の拡張セットは無視されます。
function getRgb(c){
c= c.toLowerCase();
if (/^[a-z]+$/.test(c)){
var colornames={
aqua:'#00ffff', black:'#000000', blue:'#0000ff', fuchsia:'#ff00ff',
gray:'#808080', green:'#008000', lime:'#00ff00', maroon:'#800000',
navy:'#000080', olive:'#808000', orange:'#ffa500', purple:'#800080',
red:'#ff0000', silver:'#c0c0c0', teal:'#008080', white:'#ffffff',
yellow:'#ffff00'
}
c= colornames[c];
}
if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
if(c.length== 4){
c= '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
}
c= '0x'+c.substring(1);
return [(c>>16)&255, (c>>8)&255, c&255];
}
else if(c.indexOf('rgb')== 0){
c= c.match(/\d+(\.\d+)?%?/g);
if(c){
for(var i= 0;i<3;i++){
if(c[i].indexOf('%')!= -1){
c[i]= Math.round(parseFloat(c[i])*2.55);
}
if(c[i]<0) c[i]= 0;
if(c[i]>255) c[i]= 255;
}
return c;
}
}
}
//このバージョンは、透明度を無視して、ほとんどの色文字列に対して [red.green,blue] 10 進配列を返します。
function getRgb2(c){
c= c.toLowerCase();
var colornames={
aliceblue:'#f0f8ff', antiquewhite:'#faebd7', aqua:'#00ffff',
aquamarine:'#7fffd4', azure:'#f0ffff', beige:'#f5f5dc',
bisque:'#ffe4c4', black:'#000000', blanchedalmond:'#ffebcd',
blue:'#0000ff', blueviolet:'#8a2be2', brown:'#a52a2a',
burlywood:'#deb887', cadetblue:'#5f9ea0', chartreuse:'#7fff00',
chocolate:'#d2691e', coral:'#ff7f50', cornflowerblue:'#6495ed',
cornsilk:'#fff8dc', crimson:'#dc143c', cyan:'#00ffff',
darkblue:'#00008b', darkcyan:'#008b8b', darkgoldenrod:'#b8860b',
darkgray:'#a9a9a9', darkgreen:'#006400', darkkhaki:'#bdb76b',
darkmagenta:'#8b008b', darkolivegreen:'#556b2f', darkorange:'#ff8c00',
darkorchid:'#9932cc', darkred:'#8b0000', darksalmon:'#e9967a',
darkseagreen:'#8fbc8f', darkslateblue:'#483d8b', darkslategray:'#2f4f4f',
darkturquoise:'#00ced1', darkviolet:'#9400d3', deeppink:'#ff1493',
deepskyblue:'#00bfff', dimgray:'#696969', dodgerblue:'#1e90ff',
firebrick:'#b22222', floralwhite:'#fffaf0',
forestgreen:'#228b22', fuchsia:'#ff00ff', gainsboro:'#dcdcdc',
ghostwhite:'#f8f8ff', gold:'#ffd700', goldenrod:'#daa520', gray:'#808080',
green:'#008000', greenyellow:'#adff2f', honeydew:'#f0fff0',
hotpink:'#ff69b4', indianred:'#cd5c5c', indigo:'#4b0082',
ivory:'#fffff0', khaki:'#f0e68c', lavender:'#e6e6fa',
lavenderblush:'#fff0f5', lawngreen:'#7cfc00', lemonchiffon:'#fffacd',
lightblue:'#add8e6', lightcoral:'#f08080', lightcyan:'#e0ffff',
lightgoldenrodyellow:'#fafad2', lightgray:'#d3d3d3', lightgreen:'#90ee90',
lightpink:'#ffb6c1', lightsalmon:'#ffa07a', lightseagreen:'#20b2aa',
lightskyblue:'#87cefa', lightslategray:'#778899', lightsteelblue:'#b0c4de',
lightyellow:'#ffffe0', lime:'#00ff00', limegreen:'#32cd32', linen:'#faf0e6',
magenta:'#ff00ff', maroon:'#800000', mediumaquamarine:'#66cdaa',
mediumblue:'#0000cd', mediumorchid:'#ba55d3', mediumpurple:'#9370db',
mediumseagreen:'#3cb371', mediumslateblue:'#7b68ee',
mediumspringgreen:'#00fa9a', mediumturquoise:'#48d1cc',
mediumvioletred:'#c71585', midnightblue:'#191970', mintcream:'#f5fffa',
mistyrose:'#ffe4e1', moccasin:'#ffe4b5', navajowhite:'#ffdead',
navy:'#000080', oldlace:'#fdf5e6', olive:'#808000', olivedrab:'#6b8e23',
orange:'#ffa500', orangered:'#ff4500', orchid:'#da70d6',
alegoldenrod:'#eee8aa', palegreen:'#98fb98', paleturquoise:'#afeeee',
palevioletred:'#db7093', papayawhip:'#ffefd5', peachpuff:'#ffdab9',
peru:'#cd853f', pink:'#ffc0cb', plum:'#dda0dd', powderblue:'#b0e0e6',
purple:'#800080', red:'#ff0000', rosybrown:'#bc8f8f', royalblue:'#4169e1',
saddlebrown:'#8b4513', salmon:'#fa8072', sandybrown:'#f4a460',
seagreen:'#2e8b57', seashell:'#fff5ee', sienna:'#a0522d',
silver:'#c0c0c0', skyblue:'#87ceeb', slateblue:'#6a5acd',
slategray:'#708090', snow:'#fffafa', springgreen:'#00ff7f',
steelblue:'#4682b4', tan:'#d2b48c', teal:'#008080', thistle:'#d8bfd8',
tomato:'#ff6347', turquoise:'#40e0d0', violet:'#ee82ee', wheat:'#f5deb3',
white:'#ffffff', whitesmoke:'#f5f5f5', yellow:'#ffff00', yellowgreen:'#9acd32'
}
if (/^[a-z]+$/.test(c)){
c= colornames[c];
}
if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
if(c.length== 4){
c= '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
}
c= '0x'+c.substring(1);
return [(c>>16)&255, (c>>8)&255, c&255];
}
if(c.indexOf('hsl')== 0) return hslToRgb(c);
else{
c= c.match(/\d+(\.\d+)?%?/g);
if(c){
for(var i= 0;i<3;i++){
if(c[i].indexOf('%')!= -1) c[i]= parseFloat(c[i])*2.55;
c[i]= Math.round(c[i]);
if(c[i]<0) c[i]= 0;
if(c[i]>255) c[i]= 255;
}
return c;
}
}
function hslToRgb(hsl){
if(typeof hsl== 'string'){
hsl= hsl.match(/(\d+(\.\d+)?)/g);
}
var sub, h= hsl[0]/360, s= hsl[1]/100, l= hsl[2]/100,
t1, t2, t3, rgb, val;
if(s== 0){
val= Math.round(l*255);
rgb= [val, val, val];
}
else{
if(l<0.5) t2= l*(1 + s);
else t2= l + s - l*s;
t1= 2*l - t2;
rgb= [0, 0, 0];
for(var i= 0;i<3;i++){
t3= h + 1/3*-(i - 1);
t3<0 && t3++;
t3>1 && t3--;
if(6*t3<1) val= t1 +(t2 - t1)*6*t3;
else if(2*t3<1) val= t2;
else if(3*t3<2) val= t1 +(t2 - t1)*(2/3 - t3)*6;
else val= t1;
rgb[i]= Math.round(val*255);
}
}
return rgb;
}
}
于 2012-06-17T02:24:47.693 に答える
0
この美しいハックで@Niet_the_Dark_Absolの答えを試してみgetComputedStyleましたが、作成された要素(Chrome 69およびFirefox 75)をDOMに追加するまで機能させることができませんでした。
アルファ チャネル値 (透明度) も処理できるようにしたかったので、正規表現を変更して結果を返しました。
誰にとっても役立つ場合は、これが私の機能です。
function colorToRgbParser(cssColor) {
const div = document.createElement('div');
div.id = 'for-computed-style';
div.style.color = cssColor;
// appending the created element to the DOM
document.querySelector('body').appendChild(div);
const match = getComputedStyle(div).color.match(/^rgba?\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d\.\d)\s*)?\)$/i);
// removing element from the DOM
document.querySelector('#for-computed-style').remove();
if (match) {
// match[0] is regex complete match (e.g. "rgb(0,0,0)"), not a regex capturing group
let parsedColor = {
r: match[1],
g: match[2],
b: match[3]
};
if (match[4]) { // if alpha channel is present
parsedColor.a = match[4];
}
return parsedColor;
} else {
throw new Error(`Color ${cssColor} could not be parsed.`);
}
}
于 2020-05-03T21:39:40.980 に答える
-1
var input = '#FFF';
var color = input.toLowerCase();
var hex = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var rgb = [];
if(/#/.test(color))
if(color.length==4){
var parsed = color.match(/\w/g);
rgb = [
hex.indexOf(parsed[0])*16+hex.indexOf(parsed[0]),
hex.indexOf(parsed[1])*16+hex.indexOf(parsed[1]),
hex.indexOf(parsed[2])*16+hex.indexOf(parsed[2])
]
}else{
var parsed = color.match(/\w{2}/g);
rgb = [
hex.indexOf(parsed[0][0])*16+hex.indexOf(parsed[0][1]),
hex.indexOf(parsed[1][0])*16+hex.indexOf(parsed[1][1]),
hex.indexOf(parsed[2][0])*16+hex.indexOf(parsed[2][1])
]
}
else if(/(rgb)/.test(color))
rgb = color.match(/\d+/g);
else{
//Here you define all the colors, like 'blue': [0,0,255]
}
たとえば、要素の背景色を取得しようとしている場合は、次のように使用できます。
var bg = getComputedStyle(myElem,null).getPropertyValue('background-color');
var rgb = match(/\d+/g).slice(0,3);
于 2012-06-17T01:32:54.567 に答える