Comment vérifier si une chaîne de caractères est une représentation de couleur hexagonale valide ?

Question

Par exemple :

AA33FF = couleur hexagonale valide

Z34FF9 = couleur hexagonale invalide (contient un Z)

AA33FF11 = couleur hexagonale invalide (a des caractères supplémentaires)

Answer 1

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

Pour développer :

^ -> début du match
# -> un hachage
[0-9A-F] -> tout nombre entier de 0 à 9 et toute lettre de A à F
{6} -> le groupe précédent apparaît exactement 6 fois
$ -> fin de match
i -> ignorer le cas

Si vous avez besoin de la prise en charge des codes HEX à 3 caractères, utilisez ce qui suit :

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

La seule différence ici est que

 [0-9A-F]{6}

est remplacé par

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

Cela signifie qu'au lieu de correspondre à exactement 6 caractères, il correspondra à exactement 3 caractères, mais seulement 1 ou 2 fois. Autoriser ABC y AABBCC mais pas ABCD

Answer 2

// 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

Cette réponse donnait lieu à des faux positifs car au lieu de Number('0x' + hex) il a utilisé parseInt(hex, 16) .
parseInt() analysera depuis le début de la chaîne jusqu'à ce qu'il atteigne un caractère qui n'est pas inclus dans le radix ( 16 ). Cela signifie qu'il pourrait analyser des chaînes de caractères comme 'AAXXCC', car elles commencent par 'AA'.

Number() d'autre part, ne sera analysé que si la chaîne entière correspond au radix. Maintenant, Number() ne prend pas de paramètre radix, mais heureusement, vous pouvez préfixer les littéraux numériques pour obtenir un nombre dans d'autres rayons.

Voici un tableau à des fins de clarification :

 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')

Answer 3

Cela peut être un problème compliqué. Après plusieurs tentatives, j'ai trouvé une solution assez simple. Laissez le navigateur faire le travail pour vous.

Étape 1 : Créez un div dont le style de bordure est défini sur none. La div peut être placée hors écran ou n'importe quelle div de votre page qui n'utilise pas les bordures.

Étape 2 : Définissez la couleur de la bordure sur une chaîne vide. Le code pourrait ressembler à quelque chose comme ceci :

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

Étape 3 : Définissez la couleur de la bordure sur la couleur dont vous n'êtes pas sûr.

e.style.borderColor=testcol;

Étape 4 : Vérifiez si la couleur a effectivement été modifiée. Si testcol est invalide, aucun changement n'aura lieu.

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

Étape 5 : Nettoyez après vous en remettant la couleur sur une chaîne vide.

e.style.borderColor="";

Le Div :

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

Maintenant la fonction 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;
}

Dans ce cas, la fonction renvoie une réponse vrai/faux à la question, l'autre option est de lui faire renvoyer une valeur de couleur valide. Votre valeur de couleur originale, la valeur de borderColor ou une chaîne vide à la place des couleurs invalides.

Answer 4

Si vous essayez de l'utiliser en HTML, essayez d'utiliser directement ce modèle :

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

comme

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

Il donnera une validation pour correspondre au format demandé.

Answer 5

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

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

Note : Ceci requiert jQuery

Cela fonctionne pour TOUTES les types de couleurs, pas seulement les valeurs hexadécimales. Il permet également de no ajouter des éléments inutiles à l'arbre DOM.