예를 들면 :
AA33FF = 유효한 16 진수 색상
Z34FF9 = 잘못된 16 진수 색상 (Z 포함)
AA33FF11 = 잘못된 16 진수 색상 (추가 문자 포함)
답변
/^#[0-9A-F]{6}$/i.test('#AABBCC')자세히 설명하려면 :
^ ->0에서 9까지의 정수와 A에서 F까지의 모든 문자
# ->가 해시로 시작 하는 일치 이전 그룹은 정확히 6 번 나타납니다. 일치 종료 대소 문자 무시
[0-9A-F] ->
{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()기수 ( 16)에 포함되지 않은 문자에 도달 할 때까지 문자열의 시작 부분부터 구문 분석합니다 . 이것은 ‘AA’로 시작하기 때문에 ‘AAXXCC’와 같은 문자열을 구문 분석 할 수 있음을 의미합니다.
Number()반면에 전체 문자열이 기수와 일치하는 경우에만 구문 분석합니다. 이제 Number()기수 매개 변수를 사용하지 않지만 운 좋게도 숫자 리터럴을 접두사로 사용하여 다른 반지름으로 숫자를 가져올 수 있습니다.
다음은 설명을위한 표입니다.
╭─────────────┬────────────┬────────┬───────────────────╮
│ 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를 만듭니다. 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의 값 또는 잘못된 색상 대신 빈 문자열입니다.
답변
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가 필요합니다.
이것은 16 진수 값뿐만 아니라 모든 색상 유형에 대해 작동 합니다. 또한 불필요한 요소를 DOM 트리에 추가 하지 않습니다 .
답변
색상이 유효한지 알려주는 함수가 필요한 경우 유용한 정보 (해당 색상의 계산 된 값)를 제공하고 유효한 색상이 아닌 경우 null을 반환하도록 할 수 있습니다. 다음은 ‘녹색’, ‘#FFF’, ‘# 89abcd’, ‘rgb 등 모든 형식으로 “색상”의 RGBA 값을 가져 오기 위해 호환되는 (Chrome54 및 MSIE11) 함수를 사용하는 것입니다. (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;
}
답변
잘못된 긍정을 얻지 않도록 길이 검사를 추가하십시오.
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;
}
