Як перевірити, чи є рядок дійсним шістнадцятковим кольоровим поданням?

Наприклад:

AA33FF = дійсний шістнадцятковий колір

Z34FF9 = недійсний шістнадцятковий колір (у ньому Z)

AA33FF11 = недійсний шістнадцятковий колір (має додаткові символи)

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

Розробити:

^ ->матч, що починає
# ->хеш,
[0-9A-F] ->будь-яке ціле число від 0 до 9, і будь-яка літера від А до F,
{6} ->попередня група відображається рівно 6 разів,
$ ->відповідно до кінця матчу
i ->ігнорується випадок

Якщо вам потрібна підтримка 3-символьних HEX-кодів, використовуйте наступне:

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

Єдина відмінність тут полягає в тому, що

 [0-9A-F]{6}

замінюється на

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

Це означає, що замість того, щоб відповідати рівно 6 символів, він відповідатиме рівно 3 символам, але 1 або 2 рази. Дозволити ABCі AABBCC, але ніABCD

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

Ця відповідь використовується , щоб кинути помилкові спрацьовування , оскільки замість того Number('0x' + hex), вона використовується parseInt(hex, 16).
parseInt()буде аналізувати з початку рядка, поки не досягне символу, не включеного в radix ( 16). Це означає, що він може проаналізувати рядки типу "AAXXCC", оскільки він починається з "AA".

Number()з іншого боку, буде розбиратися лише в тому випадку, якщо вся струна відповідає радіусу. Тепер, Number()не приймає параметр radix, але, на щастя, ви можете встановити префікс числа, щоб отримати число в інших радіусах.

Ось таблиця для уточнення:

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

Це може бути складною проблемою. Після кількох спроб я придумав досить чисте рішення. Нехай браузер виконує роботу за вас.

Крок 1: Створіть команду div, встановлену для жодного стилю border. Діл може бути розміщений на екрані, або це будь-який div на вашій сторінці, який не використовує межі.

Крок 2: Встановіть колір рамки в порожній рядок. Код може виглядати приблизно так:

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

Крок 3: Встановіть колір межі на той колір, в якому ви не впевнені.

e.style.borderColor=testcol;

Крок 4: Перевірте, чи змінився колір насправді. Якщо testcol недійсний, зміни не відбудуться.

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

Крок 5: Очистіть після себе, встановивши колір назад у порожній рядок.

e.style.borderColor="";

Div:

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

Тепер функція 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;
}

У цьому випадку функція повертає істинну / хибну відповідь на питання, інший варіант - це повернути дійсне значення кольору. Ваше початкове значення кольору, значення від borderColor або порожня рядок замість недійсних кольорів.

Якщо ви намагаєтесь використовувати його в HTML, спробуйте скористатися цією схемою безпосередньо:

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

подібно до

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

Це дасть перевірку на відповідність запитуваному формату.

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

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

Примітка. Для цього потрібен jQuery

Це працює для ВСІХ кольорових типів, а не лише шістнадцяткових значень. Він також не додає зайві елементи до дерева DOM.

Якщо вам потрібна функція, яка дозволяє вам повідомити, чи є колір дійсним, ви також можете йому дати щось корисне - обчислені значення цього кольору - і повернути null, коли він не є дійсним кольором. Ось мій показник сумісної функції (Chrome54 & MSIE11), щоб отримати значення RGBA "кольору" у будь-якому з форматів - будь то "зелений", або "#FFF", або "# 89abcd", або "rgb" (0,0128) 'або' 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;
}

Додайте перевірку довжини, щоб переконатися, що у вас не виявиться помилкового додатника

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;

}