rgb(a)と16進は互いに変換して、rgbaToHex、hexToRgb.
1496 ワード
最近仕事があったらメモしてください.
実は正規表現を書く時、表現が一番大切だと思います.簡潔はその次です.
実は正規表現を書く時、表現が一番大切だと思います.簡潔はその次です.
/*
rgba(100, 200, 80, 0.7);
*/
function rgbaToHex (rgba) {
rgba = rgba.replace(/\s+/g, ""); // , \s*; r g b(10, 2 0, 30) 。 。
let pattern = /^rgba?\((\d+),(\d+),(\d+),?(\d*\.\d+)?\)$/,
result = pattern.exec(rgba);
if(!result) {
throw new Error(` ${rgba} `);
}
/* r:result[1], g:result[2], b:result[3], a: result[4] */
let colors = [];
for(var i=1, len=3; i<=len; ++i) {
let str = Number(result[i]).toString(16);
if(str.length == 1) {
str = 0 + str;
}
colors.push(str);
}
return {
color: "#" + colors.join(""),
opacity: result[4] ? result[4] : "1",
};
}
/*
{color: "#010203", opacity: "1"}
{color: "#64c850", opacity: "0.7"}
{color: "#64c850", opacity: "1"}
*/
次に、16進数回転rgbを書きます.function hexToRgb(hex) {
/*
hex: {String}, "#333", "#AF0382"
*/
hex = hex.slice(1);
if(hex.length == 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
return {
r: Number.parseInt(hex.slice(0, 2), 16),
g: Number.parseInt(hex.slice(2, 4), 16),
b: Number.parseInt(hex.slice(4, 6), 16),
}
}
console.log(hexToRgb("#555"));
console.log(hexToRgb("#AF3823"));
/*
{r: 85, g: 85, b: 85}
{r: 175, g: 56, b: 35}
*/