Come verificare se una stringa è una rappresentazione di colore esadecimale valida?

Question

Per esempio:

AA33FF = hex valido colore

Z34FF9 = colore esadecimale valido (ha Z in esso)

AA33FF11 = invalido colore esadecimale (ha personaggi extra)

Answer 1

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

Per elaborare:

^ partite a cominciare
# un hash
[a-f0-9] qualsiasi lettera di AF e 0-9
{6} gruppo precedente appare esattamente 6 volte
$ fine partita
i ignorano caso

e più avanzato:

var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#ac3') // for #f00 (Thanks Smamatti) 

Answer 2

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

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

Modifica: Per favore, vedere il commento di @SalvadorDali di seguito, ci sono falsi positivi in ​​alcuni casi. Piuttosto usa un'altra soluzione.

Answer 3

Questo può essere un problema complicato. Dopo diversi tentativi, ho trovato una soluzione abbastanza pulita. Lascia che il browswer faccia il lavoro per te.

Passaggio 1: Creare un div con stile del bordo impostato su nessuno. Il div può essere posizionato fuori dallo schermo o può essere qualsiasi div sulla tua pagina che non usa i bordi.

Passaggio 2: impostare il colore del bordo su una stringa vuota. Il codice potrebbe essere simile a questo:

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

Fase 3: Impostare il colore del bordo per il colore che non si è sicuri.

e.style.borderColor=testcol; 

Passaggio 4: Controllare se il colore è stato effettivamente modificato. Se testcol non è valido, non si verificherà alcun cambiamento.

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

Passaggio 5: ripulire dopo aver impostato il colore su una stringa vuota.

e.style.borderColor=""; 

Il Div:

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

Ora la funzione 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; 
} 

In questo caso, la funzione restituisce un vera risposta/falso alla domanda, l'altra opzione è per farlo restituire un valore di colore valido. Il valore del colore originale, il valore di borderColor o una stringa vuota al posto dei colori non validi.

Answer 4

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

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

Nota: Questo richiede jQuery

Questo funziona per TUTTI tipi di colore non solo valori esadecimali. Inoltre, non aggiunge elementi inutili all'albero DOM.

Answer 5

Se hai bisogno di una funzione per dirti se un colore è valido, potresti anche darti qualcosa di utile - i valori calcolati di quel colore - e restituire null quando non è un colore valido. Ecco la mia pugnalata a una funzione compatibile (Chrome54 & MSIE11) per ottenere i valori RGBA di un "colore" in uno qualsiasi dei formati, ad esempio "verde" o "#FFF" o "# 89abcd" o "rgb". (0,0,128) ', o' 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; 
}