Jak sprawdzić, czy ciąg znaków jest prawidłową reprezentacją kolorów szesnastkowych?

function isHexaColor(sNum){
  return (typeof sNum === "string") && sNum.length === 6 
         && ! isNaN( parseInt(sNum, 16) );
}

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

Edit : proszę, Zobacz komentarz @SalvadorDali poniżej, istnieją fałszywe alarmy w niektórych przypadkach. Raczej użyć innego rozwiązania.

To może być skomplikowany problem. Po kilku próbach wymyśliłem dość czyste rozwiązanie. Pozwól przeglądarce wykonać pracę za Ciebie.

Krok 1: Utwórz div z border-style ustawionym na none. Div może być umieszczony poza ekranem lub może to być dowolny div na stronie, który nie używa granic.

Krok 2: Ustaw kolor obramowania na pusty łańcuch. Kod może wyglądać mniej więcej tak:

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

Krok 3: Ustaw kolor obramowania na kolor, którego nie jesteś pewien około.

e.style.borderColor=testcol;

Krok 4: Sprawdź, czy kolor rzeczywiście został zmieniony. Jeśli testcol jest nieprawidłowy, nie nastąpi żadna zmiana.

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

Krok 5: Wyczyść po sobie, ustawiając kolor z powrotem na pusty ciąg.

e.style.borderColor="";

Div:

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

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

W tym przypadku funkcja zwraca odpowiedź true / false na pytanie, inną opcją jest zwrócenie prawidłowej wartości koloru. Oryginalna wartość koloru, wartość od borderColor lub pusty łańcuch zamiast nieprawidłowych kolorów.

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

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

uwaga: to wymaga jQuery

To działa dla wszystkich typów kolorów , a nie tylko wartości szesnastkowe. To również Nie dołącza niepotrzebne elementy do drzewa DOM.

Jeśli potrzebujesz funkcji, która powie Ci, czy kolor jest prawidłowy, możesz równie dobrze dać ci coś użytecznego - obliczone wartości tego koloru - i zwrócić null, gdy nie jest prawidłowym kolorem. Oto mój stab w kompatybilnej (Chrome54 i Msie11) funkcji, aby uzyskać wartości RGBA "kolor" w dowolnym formacie-czy to 'zielony', lub' #fff', lub '#89abcd', lub ' rgb (0,0,128)', lub ' 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;
}

Jeśli próbujesz użyć go w HTML spróbuj użyć tego wzorca bezpośrednio:

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

Jak

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

Da walidację, aby dopasować żądany format.