БлогNot. Как проверить валидность строки с кодом цвета на Javascript?

Как проверить валидность строки с кодом цвета на Javascript?

Способов можно придумать много, самым простым мне кажется показанный ниже, правда, связанный с созданием элемента в структуре DOM, но тут остаётся надеяться, что миллионы строк нам создавать не надо, а "сборщик мусора" сработает как надо.

Плюс не нужно писать разборы многочисленных форматов представления цвета, включая обозначения словом.

<div id="tests_result"></div>
<script>
 //Сам код
 function getColorCSS (c) {
  let elem = document.createElement("span");
  elem.style.color = c;
  return elem.style.color.split(/\s+/).join('').toLowerCase();
 }
 function isColorValid (c) {
  let s = this.getColorCSS(c);
  return (s) ? true : false;
 }

 //Тесты
 let tests = [
  'rgb(128,255,0)',
  'rgba(51,102,153,0.5)',
  '#0ed',
  '#00F040',
  'red',
  'hsl(206, 56%, 25%)',
  'hsla(206, 56%, 25%, .9)',
  '333333',
   //дальше - неверные значения
  'зелёный',
  '#GFFFFF',
  '#f0',
  'unknown',
  'hsl(206, 56%, a)'
 ];
 let len = tests.length;
 let str = '';
 for (let i = 0; i < len; i++) {
  let valid = isColorValid (tests[i]);
  str += (valid ? '<span style="color: ' + tests[i] +';">' : '') + 
         tests[i] + 
         (valid ? '</span>' : '') + ': '+
         valid + (i < len - 1 ? "<br>\n" : '');
 }
 document.getElementById ('tests_result').innerHTML = str;
</script>
<noscript><p>Нужен включённый Javascript для работы примера!</p></noscript>

Вот что вывел этот список тестов:

rgb(128,255,0): true
rgba(51,102,153,0.5): true
#0ed: true
#00F040: true
red: true
hsl(206, 56%, 25%): true
hsla(206, 56%, 25%, .9): true
333333: true
зелёный: false
#GFFFFF: false
#f0: false
unknown: false
hsl(206, 56%, a): false

13.02.2021, 10:40 [1019 просмотров]


теги: программирование javascript цвет

К этой статье пока нет комментариев, Ваш будет первым