Bir dizenin geçerli bir onaltılık renk temsili olup olmadığı nasıl kontrol edilir?

Örneğin:

AA33FF = geçerli onaltılık renk

Z34FF9 = geçersiz onaltılık renk (içinde Z var)

AA33FF11 = geçersiz onaltılık renk (fazladan karakterler var)

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

Detaylandırmak için:

^ ->başlayan maç
# ->bir karma
[0-9A-F] ->0 ile 9 arasında herhangi bir tamsayı ve F A'dan herhangi bir harf
{6} ->önceki grup tam 6 kez görünen
$ ->ucunu maç
i ->davayı görmezden

3 karakterli HEX kodları için desteğe ihtiyacınız varsa, aşağıdakileri kullanın:

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

Buradaki tek fark şu ki

 [0-9A-F]{6}

ile değiştirilir

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

Bu, tam olarak 6 karakterle eşleştirmek yerine tam olarak 3 karakterle ancak 1 veya 2 kez eşleşeceği anlamına gelir. İzin vermek ABCve AABBCCama değilABCD

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

Bu cevap, yanlış pozitifler atmak Number('0x' + hex)için kullanılırdı, çünkü yerine kullanıldı parseInt(hex, 16).
parseInt()radix ( 16) içinde olmayan bir karaktere ulaşıncaya kadar dizenin başından ayrıştırılır . Bu, "AA" ile başladığı için "AAXXCC" gibi dizeleri ayrıştırabileceği anlamına gelir.

Number(), öte yandan, yalnızca dizenin tamamı radix ile eşleşirse ayrıştırılır. Şimdi, Number()bir radix parametresi almıyor, ancak neyse ki, diğer yarıçaplarda bir sayı elde etmek için sayı değişmezlerinin önüne ekleyebilirsiniz.

İşte açıklama için bir tablo:

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

Bu karmaşık bir sorun olabilir. Birkaç denemeden sonra oldukça temiz bir çözüm buldum. Bırakın tarayıcı işi sizin yerinize yapsın.

Adım 1: Kenarlık stili yok olarak ayarlanmış bir div oluşturun. Div ekran dışında konumlandırılabilir veya sayfanızda kenarlıkları kullanmayan herhangi bir div olabilir.

Adım 2: Kenarlık rengini boş bir dizeye ayarlayın. Kod şunun gibi görünebilir:

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

3. Adım: Kenarlık rengini emin olmadığınız renge ayarlayın.

e.style.borderColor=testcol;

Adım 4: Rengin gerçekten değişip değişmediğini kontrol edin. Testcol geçersizse, hiçbir değişiklik olmayacaktır.

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

Adım 5: Rengi boş bir dizeye geri ayarlayarak kendinizden sonra temizleyin.

e.style.borderColor="";

Div:

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

Şimdi JavaScript işlevi:

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

Bu durumda, işlev soruya doğru / yanlış yanıt verir, diğer seçenek ise geçerli bir renk değeri döndürmesidir. Orijinal renk değeriniz, borderColor'dan gelen değer veya geçersiz renkler yerine boş bir dize.

HTML'de kullanmaya çalışıyorsanız Bu kalıbı doğrudan kullanmayı deneyin:

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

sevmek

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

İstenen formatla eşleşmesi için bir doğrulama verecektir.

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

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

Not: Bu, jQuery gerektirir

Bu, yalnızca onaltılık değerler için değil TÜM renk türleri için çalışır . Ayrıca gelmez değil DOM ağacına gereksiz unsurları ekleyin.

Bir rengin geçerli olup olmadığını söyleyecek bir işleve ihtiyacınız varsa, size yararlı bir şey vermesini de sağlayabilirsiniz - o rengin hesaplanan değerleri - ve geçerli bir renk olmadığında boş döndürür. "Yeşil", "#FFF" veya "# 89abcd" veya "rgb" biçimlerinin herhangi birinde bir "rengin" RGBA değerlerini elde etmek için uyumlu (Chrome54 ve MSIE11) işlevlerim burada. (0,0,128) 'veya' 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;
}

Yanlış pozitif almadığınızdan emin olmak için bir uzunluk kontrolü ekleyin

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;

}