[javascript] 문자열이 유효한 16 진수 색상 표현인지 확인하는 방법은 무엇입니까?

예를 들면 :

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;

}