[RegExp sample] HEX 타입 체크

/^\#(([0-9a-f]){3}|([0-9a-f]){6}|([0-9a-f]){8})$/i

---

1. HEX란?

먼저 HEX 값은 색을 나타내는 표현 방식중 하나로, #과 16진수 6자리(+2자리)로 이루어져있다.

16진수는 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F 으로 표현되며, 알파벳 대소문자는 구분하지 않는다.

HEX 값이 6자리인 경우, 빨강, 초록, 파랑의 색의 강도를 256 단계에 걸쳐 나타낸 것이고, 8자리일 경우는 투명도까지 표현하는 경우이다.

또한 HEX 값이 3자리인 경우도 있는데, 이 경우는 빨강, 초록, 파랑의 각 값을 16단계에 걸쳐서 표현한 것이다.

※ 투명도 값을 넣지 않는 경우 자동으로 FF(불투명)으로 인식한다.

※ 투명도는 FF일때 불투명, 00일때 완전히 투명해진다.

📌HEX값의 유형 - #으로 시작 - 16진수가 3자리 or 6자리 or 8자리일 수 있다. - 16진수는 대소문자를 구별하지 않는다.

 

 

2. 정규표현식

/^\#(([0-9a-f]){3}|([0-9a-f]){6}|([0-9a-f]){8})$/i

var reg = new  RegExp(/^\#(([0-9a-f]){3}|([0-9a-f]){6}|([0-9a-f]){8})$/i);
reg.test('#fff'); //3자리 true
reg.test("#ff3355");//6자리 true
reg.test("#ff335544");//8자리 true
reg.test("#ff3355441");//7자리 false
reg.test("#ffpp55");//16진수가 아닌 값 "pp" false

아래는 정규표현식을 시각화해 보았다.

 

3. 정규표현식 구조

HEX 정규표현식 구조 시각화

 

 

---

 

🎃정규표현식이 왜 저렇게 구성됬는지 모르겠다면? 아래 게시글을 참고하면 도움이 될 겁니다.

[정규표현식] 정규표현식(Regular expression) (feat. javascript)

 

🎃정규표현식 구조 이미지 출처를 알고 싶으시면? 아래 게시글을 참고해 주세요.

[정규표현식] 테스트 사이트

 

🎃또 다른 정규표현식 샘플을 확인하고 싶다면? 아래 예제는 어떠세요?

[정규표현식] 전화/핸드폰 번호 샘플

[정규표현식] 이메일 샘플

 

 

도움이 되셨으면 좋겠습니다!