文字列が有効な16進数の色表現であるかどうかを確認する方法は？

例えば：

AA33FF =有効な16進数の色

Z34FF9 =無効な16進数の色（Zが含まれています）

AA33FF11 =無効な16進数の色（余分な文字がある）

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

詳しく説明するには：

^ ->始め一致
# ->ハッシュに
[0-9A-F] ->0から9までの任意の整数とFにAから任意の文字
{6} ->前のグループは正確に6回が表示され
$ ->、エンドに一致する
i ->ケースを無視します

3文字のHEXコードのサポートが必要な場合は、以下を使用します。

/^#([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

// regular function
function isHexColor (hex) {
  return typeof hex === 'string'
      && hex.length === 6
      && !isNaN(Number('0x' + hex))
}

// or as arrow function (ES6+)
isHexColor = hex => typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex))

console.log(isHexColor('AABBCC'))   // true
console.log(isHexColor('AABBCC11')) // false
console.log(isHexColor('XXBBCC'))   // false
console.log(isHexColor('AAXXCC'))   // false

この答えはNumber('0x' + hex)、誤検出をスローするために使用されていましたparseInt(hex, 16)。
parseInt()文字列の先頭から、基数（16）に含まれていない文字に到達するまで解析します。これは、「AA」で始まるため、「AAXXCC」のような文字列を解析できることを意味します。

Number()一方、文字列全体が基数と一致する場合のみ解析します。さて、Number()基数パラメータを取りませんが、幸いにも、あなたが他の半径の数を取得するために数リテラルの前に付けることができます。

明確にするための表を次に示します。

╭─────────────┬────────────┬────────┬───────────────────╮
│ Radix       │ Characters │ Prefix │ Will output 27    │
╞═════════════╪════════════╪════════╪═══════════════════╡
│ Binary      │ 0-1        │ 0b     │ Number('0b11011') │
│ Octal       │ 0-7        │ 0o     │ Number('0o33')    │
│ Decimal     │ 0-9        │ -      │ -                 │
│ Hexadecimal │ 0-9A-F     │ 0x     │ Number('0x1b')    │
╰─────────────┴────────────┴────────┴───────────────────╯

これは複雑な問題になる可能性があります。何度か試した後、私はかなりクリーンな解決策を思いつきました。ブラウザーに作業を任せましょう。

ステップ1：ボーダースタイルをnoneに設定してdivを作成します。divは画面外に配置することも、ボーダーを使用しないページ上のdivにすることもできます。

手順2：境界線の色を空の文字列に設定します。コードは次のようになります。

e=document.getElementbyId('mydiv');
e.style.borderColor="";

ステップ3：境界線の色を不明な色に設定します。

e.style.borderColor=testcol;

手順4：色が実際に変更されたかどうかを確認します。testcolが無効な場合、変更は行われません。

col2=e.style.borderColor;
if(col2.length==0) {alert("Bad Color!");}

ステップ5：色を空の文字列に戻して自分の後をクリーンアップします。

e.style.borderColor="";

Div：

<div id="mydiv" style="border-style:none; position:absolute; left:-9999px; top:-9999px;"></div>

JavaScript関数：

function GoodColor(color)
{
   var color2="";
   var result=true;
   var e=document.getElementById('mydiv');
   e.style.borderColor="";
   e.style.borderColor=color;
   color2=e.style.borderColor;
   if (color2.length==0){result=false;}
   e.style.borderColor="";
   return result;
}

この場合、関数は質問に対してtrue / falseの回答を返します。他のオプションは、有効な色の値を返すことです。元の色の値、borderColorの値、または無効な色の代わりの空の文字列。

HTMLで使用する場合は、次のパターンを直接使用してみてください。

 pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"

お気に入り

<input id="hex" type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />

リクエストされたフォーマットに一致するかどうかの検証を行います。

function validColor(color){
  var $div = $("<div>");
  $div.css("border", "1px solid "+color);
  return ($div.css("border-color")!="")
}

https://gist.github.com/dustinpoissant/22ce25c9e536bb2c5a2a363601ba261c

注：これにはjQueryが必要です

これは、16進値だけでなく、すべてのカラータイプで機能します。また、DOMツリーに不要な要素を追加しません。

色が有効かどうかを通知する関数が必要な場合は、便利な機能（その色の計算値）を提供し、有効な色でない場合はnullを返すようにすることもできます。これは、「グリーン」、「＃FFF」、「＃89abcd」、「rgb」のいずれかの形式で「カラー」のRGBA値を取得するための互換性のある（Chrome54＆MSIE11）関数での私のスタブです（0,0,128） 'または' rgba（0、128、255、0.5） '。

/* getRGBA:
  Get the RGBA values of a color.
  If input is not a color, returns NULL, else returns an array of 4 values:
   red (0-255), green (0-255), blue (0-255), alpha (0-1)
*/
function getRGBA(value) {
  // get/create a 0 pixel element at the end of the document, to use to test properties against the client browser
  var e = document.getElementById('test_style_element');
  if (e == null) {
    e = document.createElement('span');
    e.id = 'test_style_element';
    e.style.width = 0;
    e.style.height = 0;
    e.style.borderWidth = 0;
    document.body.appendChild(e);
  }

  // use the browser to get the computed value of the input
  e.style.borderColor = '';
  e.style.borderColor = value;
  if (e.style.borderColor == '') return null;
  var computedStyle = window.getComputedStyle(e);
  var c
  if (typeof computedStyle.borderBottomColor != 'undefined') {
    // as always, MSIE has to make life difficult
    c = window.getComputedStyle(e).borderBottomColor;
  } else {
    c = window.getComputedStyle(e).borderColor;
  }
  var numbersAndCommas = c.replace(new RegExp('[^0-9.,]+','g'),'');
  var values = numbersAndCommas.split(',');
  for (var i = 0; i < values.length; i++)
    values[i] = Number(values[i]);
  if (values.length == 3) values.push(1);
  return values;
}

誤検知がないことを確認するための長さチェックを追加します

function isValidHex(testNum){
  let validHex = false;
  let numLength = testNum.length;
  let parsedNum = parseInt(testNum, 16);
  if(!isNan(parsedNum) && parsedNum.length===numLength){
     validHex = true;
  }
  return validHex;

}