Как проверить валидность строки с кодом цвета на 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
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 [1037 просмотров]