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

Si vous avez besoin d'une fonction pour vous dire si une couleur est valide, autant qu'elle vous donne quelque chose d'utile -- les valeurs calculées de cette couleur -- et qu'elle renvoie null si ce n'est pas une couleur valide. Voici mon essai pour une fonction compatible (Chrome54 & MSIE11) pour obtenir les valeurs RGBA d'une "couleur" dans n'importe quel format -- que ce soit 'green', ou '#FFF', ou '#89abcd', ou 'rgb(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;
}

Answer 2

Ajoutez une vérification de la 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;

}

Answer 3

J'ai décidé d'essayer une autre perspective. Mes règles étaient les suivantes : 1) séquence de caractères hexagonaux arbitrairement longue, 2) utilisation de "0x" ou "#" au début d'une séquence, ou 3) juste un nombre ou une chaîne de caractères hexagonaux. Je pense à l'époque où binhex était l'un des grands programmes. Binhex créait de très gros fichiers qui pouvaient être transférés n'importe où et ensuite transformés en n'importe quel fichier que vous aviez converti. Ces fichiers comportaient 80 caractères suivis d'un retour. Donc, dans cette fonction, je recherche les retours et les retire d'abord. J'ai modifié la fonction pour qu'elle recherche à la fois le " \n " y " \r ". Voici le code :

////////////////////////////////////////////////////////////////////////////////
//  isHex(). Is this a hex string/value?
//  Arguments   :   0   =   Item to test
//                  1   =   V(alue) or S(tring). Default is STRING.
////////////////////////////////////////////////////////////////////////////////
function isHex()
{
    var p = 0;
    var re1 = /(\n|\r)+/g;
    var re2 = /[\Wg-zG-Z]/;
    var re3 = /v/i;
//
//  Make sure the string is really a string.
//
    var s = arguments[0];
    if( typeof s != "string" ){ s = s.toString(); }
//
//  Check if this is a hex VALUE
//  and NOT a hex STRING.
//
    var opt = arguments[1];
    if( re3.test(opt) && (s.length % 2 > 0) ){ return "false"; }
//
//  Remove any returns. BinHex files can be megabytes in length with 80
//  column information. So we have to remove all returns first.
//
    s.replace( re1, "" );
//
//  IF they send us something with the universal "0x" or the HTML "#" on the
//  front of it - we have to FIRST move where we look at the string.
//
    if( s.substr(0,1) == "#" ){ p = 1; }
        else if( s.substr(0,2).toLowerCase() == "0x" ){ p = 2; }

   if( re2.test(s.substr(p,s.length)) ){ return "false"; }

   return "true";
}

alert("HELLO There!");
alert(isHex("abcdef"));
alert(isHex("0x83464"));
alert(isHex("#273847"));
alert(isHex("This is a test"));
alert(isHex(0x5346));

J'ai volontairement laissé les valeurs de retour sous forme de chaînes de caractères, mais il suffit de supprimer les guillemets pour que la fonction renvoie simplement VRAI ou FAUX.