Как проверить, является ли строка допустимым шестнадцатеричным представлением цвета?

Ответ 1

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

Для уточнения:

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

Если вам нужна поддержка для трехсимвольных 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

Ответ 2

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

Ответ 3

Это может быть сложной проблемой. После нескольких попыток я придумал довольно чистое решение. Позвольте browswer выполнять работу за вас.

Шаг 1: Создайте div с граничным стилем, равным none. Div может быть размещен за пределами экрана или может быть любым 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;
}

В этом случае функция возвращает истинный/ложный ответ на вопрос, другой вариант - вернуть правильное значение цвета. Исходное значение цвета, значение from borderColor или пустая строка вместо недопустимых цветов.

Ответ 4

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.

Ответ 5

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

Ответ 6

Если вы пытаетесь использовать его в 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})$" />

Это даст подтверждение в соответствии с запрошенным форматом.

Ответ 7

Добавьте проверку длины, чтобы убедиться, что вы не получите ложный положительный результат

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;

}