文字列が有効な 16 進カラー表現であるかどうかを確認するにはどうすればよいでしょうか? 質問する

文字列が有効な 16 進カラー表現であるかどうかを確認するにはどうすればよいでしょうか? 質問する

例えば:

AA33FF= 有効な16進数カラー

Z34FF9= 無効な 16 進数カラー (Z が含まれています)

AA33FF11= 無効な 16 進数カラー (余分な文字があります)

ベストアンサー1

透明なサポートなし:

/^#[0-9A-F]{6}$/i.test('#AABBCC')

透明なサポート付き:

/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test('#AABBCC80')

詳しく説明すると:

^ ->
# ->ハッシュの先頭に一致、
[0-9A-F] ->0から9までの任意の整数とAからFまでの任意の文字、
{6} ->前のグループが正確に6回出現、
[0-9a-f]{0,2} ->透過(00..FF)のサポートを追加、
$ ->終了に一致、
i ->大文字と小文字を無視

3 文字の 16 進コードのサポートが必要な場合 (透過はサポートされていません) は、以下を使用します。

/^#([0-9A-F]{3}){1,2}$/i.test('#ABC')

ここでの唯一の違いは

 [0-9A-F]{6}

は次のように置き換えられます

([0-9A-F]{3}){1,2}

これは、正確に6文字に一致するのではなく、正確に3文字に一致するが、1回か2回のみ一致することを意味します。ABCと は許可されますAABBCCが、ABCD

複合ソリューション:

var reg=/^#([0-9a-f]{3}){1,2}$/i;
console.log(reg.test('#ABC')); //true
console.log(reg.test('#AABBCC')); //true

おすすめ記事