web-dev-qa-db-fra.com

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

Par exemple:

AA33FF = couleur hexadécimale valide

Z34FF9 = couleur hexadécimale invalide (contient Z)

AA33FF11 = couleur hexadécimale invalide (avec caractères supplémentaires)

javascriptjquerycolors
92
Alex
var isOk  = /^#[0-9A-F]{6}$/i.test('#aabbcc')

Élaborer:

^ début du match
# un hachage
[a-f0-9] toute lettre de a-f et 0-9
{6} le groupe précédent apparaît exactement 6 fois
$ match end
i ignorer la casse

et plus avancé: 

 var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#ac3') // for #f00 (Thanks Smamatti)
212
Royi Namir
function isHexaColor(sNum){
  return (typeof sNum === "string") && sNum.length === 6 
         && ! isNaN( parseInt(sNum, 16) );
}

isHexaColor("AA33FF") => true
isHexaColor("Z34FF9") => false
isHexaColor("AA33FF11") => false

Edit : Veuillez voir le commentaire de @SalvadorDali ci-dessous, il y a des faux positifs dans certains cas Utilisez plutôt une autre solution.

27
fflorent

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

Étape 1: Créez un div avec un style de bordure défini sur aucun. La div peut être positionné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 à 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 réellement été modifiée. Si testcol n'est pas valide, aucun changement ne se produira.

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

Étape 5: Nettoyez-vous en définissant la couleur sur une chaîne vide. 

e.style.borderColor="";

La 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 consiste à lui renvoyer une valeur de couleur valide. Votre valeur de couleur d'origine, la valeur de borderColor ou une chaîne vide à la place de couleurs non valides.

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

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

_ {Remarque: cela nécessite jQuery} _

Cela fonctionne pour TOUS LES TYPES DE COULEURS et pas seulement les valeurs hexadécimales. Not ajoute également des éléments inutiles à l'arborescence DOM.

2
Dustin Poissant

Si vous avez besoin d’une fonction qui vous indique si une couleur est valide, vous pouvez également lui demander de vous donner quelque chose d’utile - les valeurs calculées de cette couleur - et renvoyer null si ce n’est pas une couleur valide. Voici mon coup de poignard à une fonction compatible (Chrome54 & MSIE11) pour obtenir les valeurs RGBA d'une "couleur" dans n'importe lequel des formats - que ce soit "vert" ou "#FFF" ou "# 89abcd" (0,0,128) 'ou' 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;
}
1
Abacus

Si vous essayez de l’utiliser en HTML Essayez d’utiliser ce modèle directement: 

 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é.

0
Mohit Dhawan

Ajoutez une vérification de longueur pour vous assurer que vous n'obtenez pas un faux positif

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;

}

0
rotato poti