#fffなどの値を[255, 255, 255]などのデータに変換する用事があったのでメモ。
結論
const str2rgb=e=>{let p=document.createElement("p");p.style.color=e;return p.style.color.replace(/[()rgba ]/g,"").split(",")}
使い方:
str2rgb("#fff")
// => [255, 255, 255]
rgba、hslなどの形式も対応している。
※ ブラウザが解釈できれば
やっていること
jsでスタイルを取得するとrgbに変換されることを利用したもの。
なのでdocument.createElementで適当な要素を作り色を指定&取得して整形して返しているだけ。
没バージョン
こちらは#fffなどの表記しか対応していない上コードが長い。
s=>/^#([0-9a-f]?[0-9a-f]{3}|([0-9a-f]{2})?[0-9a-f]{6})$/i.test(s)?(s.replace(/#/g,"").split("").map(e=>/4|5/.test(s.length+"")?e.repeat(2).split(""):e)).flat().reduce((b,c,i)=>i%2==0?b+","+c:b+c,"").substr(1).split(",").map(e=>parseInt(e,16)):[]
使い方は同じ。
追記
DOMに触るとオーバーヘッドがあるのでは？という点が心配だったので、簡単なベンチマークを取ってみました。
これはhsl()や色名の指定に対応していない簡易版のピュアJS実装との比較ですが、自分の環境ではDOMに触る方が6～7倍遅いという> 結果でした。
とはいえ、10万回実行してもChromeではピュアJSで70ミリ秒に対しDOMで460ミリ秒といったオーダーで、1回あたりの実行コストはもはや誤差レベルなので、実用上はDOMを使う方法で全く問題無さそうですね。
自分の環境でも試したところ、今回のプログラムは1.2秒0.012msほどかかっていました。
追記2
https://qiita.com/nyanwan202/items/3ceac2088fefd9b5e3ad#comment-82f2c8defe5f4bd036f0
また勘違いしていました。
1.2秒だと思っていたのは10万回の実行時間だそうで、
1回あたりは0.012msだそうです。
これは個別にプログラム書いて計算した方がよさそう。
あとnpmパッケージで良さそうなのないかと思って探して見ました。
+ https://www.npmjs.com/package/color
+ https://www.npmjs.com/package/color-convert
どちらもGithubでソースコードを見たところDOMはいじってないようです。
よくよく考えたらNode.js上で動くんですから当たり前ですね。
weekly downloadsはcolor-convertの方が上ですね(2019/05/08)。
| Name | Count |
|---|---|
| color | 5,719,940 |
| color-convert | 9,194,594 |
文章の書き方が違うのは気分