Wie überprüfe ich, ob eine Zeichenfolge eine gültige hexadezimale Farbdarstellung ist?

Beispielsweise:

AA33FF = gültige Hex-Farbe

Z34FF9 = ungültige Hex-Farbe (enthält Z)

AA33FF11 = ungültige Hex-Farbe (hat zusätzliche Zeichen)

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

Um dies zu erläutern:

^ ->entsprechen beginnend
# ->ein Hash
[0-9A-F] ->beliebige ganze Zahl von 0 bis 9 und einen beliebigen Buchstaben von A bis F
{6} ->die vorherige Gruppe erscheint genau 6mal
$ ->Ende übereinstimmen
i ->ignorieren Fall

Wenn Sie Unterstützung für dreistellige HEX-Codes benötigen, verwenden Sie Folgendes:

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

Der einzige Unterschied ist der

 [0-9A-F]{6}

wird ersetzt durch

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

Dies bedeutet, dass anstelle von genau 6 Zeichen genau 3 Zeichen, jedoch 1 oder 2 Mal übereinstimmen. Erlauben ABCund AABBCC, aber nichtABCD

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

Diese Antwort wurde verwendet, um falsch positive Ergebnisse zu erzielen, da sie stattdessen Number('0x' + hex)verwendet wurde parseInt(hex, 16).
parseInt()analysiert vom Anfang der Zeichenfolge bis ein Zeichen erreicht ist, das nicht in radix ( 16) enthalten ist. Dies bedeutet, dass Zeichenfolgen wie 'AAXXCC' analysiert werden können, da es mit 'AA' beginnt.

Number()Auf der anderen Seite wird nur analysiert, wenn die gesamte Zeichenfolge mit dem Radix übereinstimmt. Number()Nehmen Sie jetzt keinen Radix-Parameter, aber zum Glück können Sie Zahlenliterale voranstellen, um eine Zahl in anderen Radien zu erhalten.

Hier ist eine Tabelle zur Verdeutlichung:

╭─────────────┬────────────┬────────┬───────────────────╮
│ 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')    │
╰─────────────┴────────────┴────────┴───────────────────╯

Dies kann ein kompliziertes Problem sein. Nach mehreren Versuchen fand ich eine ziemlich saubere Lösung. Lassen Sie den Browser die Arbeit für Sie erledigen.

Schritt 1: Erstellen Sie ein Div, dessen Rahmenstil auf "Keine" gesetzt ist. Das Div kann außerhalb des Bildschirms positioniert werden oder es kann ein beliebiges Div auf Ihrer Seite sein, das die Ränder nicht verwendet.

Schritt 2: Setzen Sie die Rahmenfarbe auf eine leere Zeichenfolge. Der Code könnte ungefähr so ​​aussehen:

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

Schritt 3: Stellen Sie die Rahmenfarbe auf die Farbe ein, bei der Sie sich nicht sicher sind.

e.style.borderColor=testcol;

Schritt 4: Überprüfen Sie, ob die Farbe tatsächlich geändert wurde. Wenn testcol ungültig ist, wird keine Änderung vorgenommen.

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

Schritt 5: Räumen Sie nach sich selbst auf, indem Sie die Farbe auf eine leere Zeichenfolge zurücksetzen.

e.style.borderColor="";

Die Div:

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

Nun die JavaScript-Funktion:

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;
}

In diesem Fall gibt die Funktion eine Richtig / Falsch-Antwort auf die Frage zurück. Die andere Option besteht darin, einen gültigen Farbwert zurückzugeben. Ihr ursprünglicher Farbwert, der Wert von borderColor oder eine leere Zeichenfolge anstelle ungültiger Farben.

Wenn Sie versuchen, es in HTML zu verwenden Versuchen Sie, dieses Muster direkt zu verwenden:

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

mögen

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

Es wird eine Validierung gegeben, die dem angeforderten Format entspricht.

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

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

Hinweis: Dies erfordert jQuery

Dies funktioniert für ALLE Farbtypen, nicht nur für Hex-Werte. Es ist auch nicht anhängen unnötige Elemente an den DOM - Baum.

Wenn Sie eine Funktion benötigen, die Ihnen sagt, ob eine Farbe gültig ist, können Sie sich auch etwas Nützliches geben lassen - die berechneten Werte dieser Farbe - und null zurückgeben, wenn es sich nicht um eine gültige Farbe handelt. Hier ist mein Versuch mit einer kompatiblen (Chrome54 & MSIE11) Funktion, um die RGBA-Werte einer "Farbe" in einem der Formate zu erhalten - sei es "grün" oder "#FFF" oder "# 89abcd" oder "rgb" (0,0,128) 'oder' 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;
}

Fügen Sie eine Längenprüfung hinzu, um sicherzustellen, dass Sie kein falsches Positiv erhalten

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;

}}