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

Question

Например:

AA33FF = правильный шестнадцатеричный цвет

Z34FF9 = неверный шестнадцатеричный цвет (содержит Z) * ​​1007 *

AA33FF11 = неправильный шестнадцатеричный цвет (содержит дополнительные символы)

Answer 1

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

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

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

и более продвинутый:

 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

Редактировать : см. Комментарий @SalvadorDali ниже, в некоторых случаях имеются ложные срабатыванияСкорее используйте другое решение.

Answer 3

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

Шаг 1: Создайте div с установленным нулевым стилем границы. Элемент 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 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 или пустая строка вместо недопустимых цветов.

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

Примечание: для этого требуется jQuery

Это работает для ALL типов цвета, а не только шестнадцатеричных значений.Он также не добавляет ненужные элементы в дерево DOM.

Answer 5

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

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

Answer 6

Если вам нужна функция, которая сообщает вам, является ли цвет допустимым, вы также можете получить от него что-то полезное - вычисленные значения этого цвета - и вернуть значение 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;
}

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

}