정규식 예제

이전에 포스팅 했던 31. 모던 자바스크립트 Deep Dive (RegExp)에 이어서 확실하게 예제를 만들어 짚고 넘어갈 예정이다.

1. YYYY-MM-DD 형식의 날짜

• 사용된 패턴
  1. ^: [] 외부의 ^는 문자열의 시작을 나타냄
  2. $: 문자열의 끝을 나타냄
  3. \d{N}: \d는 숫자를 의미하며, {N}은 정확히 N개의 숫자가 있어야 함을 나타냄

const answer_inputs = ['2024-11-19', '1999-01-01', '2023-12-31'];
const wrong_inputs = ['24-11-19', '2024/11/19', '2024-13-01', '2024-11'];
const regexp = /^\d{4}-\d{2}-\d{2}$/;

2. 영어와 숫자로만 이루어진 문자열

• 사용된 패턴
  1. ^: 문자열의 시작을 나타냄
  2. $: 문자열의 끝을 나타냄
  3. [a-zA-Z]: 영어 소문자(a-z)와 대문자(A-Z)를 포함
  4. [0-9]: 숫자를 포함
  5. +: 하나 이상의 문자(앞의 패턴)가 있어야 함

const answer_inputs = ['3a2AbB1', '123ABCabc', 'abcdef123'];
const wrong_inputs = ['aAbB!', '123 456', 'ABC@DEF', 'a_b_c'];
const regexp = /^[a-zA-Z0-9]+$/;

3. 대괄호로 감싸져있는 문자열(한글과 영어만 가능, 공백 포함 가능)

• 사용된 패턴
  1. \s: 공백을 포함

const answer_inputs = ['[abcd 가나다라]', '[Hello 안녕]', '[가나다 ABC]'];
const wrong_inputs = ['[123abcd]', '[Hello!]', '[가나다라123]', 'abcd 가나다라'];
const regexp = /^\[[가-힣a-zA-Z\s]+\]$/;

4. 대문자로 시작하는 영어 단어

• 사용된 패턴
  1. *: 0개 이상의 문자(앞의 패턴)가 올 수 있음을 의미함

const answer_inputs = ['Apple', 'Hello', 'Zebra'];
const wrong_inputs = ['apple', 'HELLO123', '123Hello', 'helloWorld'];
const regexp = /^[A-Z][a-zA-Z]*$/;

5. 숫자 사이의 쉼표 형식 확인 (천 단위)

• 사용된 패턴
  1. (\d{1,3},)*: 쉼표로 구분된 숫자 그룹
  2. \d{1,3}: 마지막 숫자 그룹
  3. *: 0개 이상의 문자(앞의 패턴)가 올 수 있음을 의미함

const answer_inputs = ['1,000', '12,345,678', '123'];
const wrong_inputs = ['1,00', '123,4567', '1234,567'];
const regexp = /^\d{1,3}(,\d{3})*$/;

6. 특수 문자만 포함된 문자열

• 사용된 패턴
  1. ^: [] 내부의 ^는 not을 나타냄, [] 외부의 ^는 문자열의 시작을 나타냄
  2. +: 한개 이상의 문자(앞의 패턴)가 있어야 함

const answer_inputs = ['@#$%', '!*^&'];
const wrong_inputs = ['abc!', '123$', '안녕@'];
const regexp = /^[^a-zA-Z0-9가-힣]+$/;

7. 16자리 신용카드 번호 검증

• 사용된 패턴
  1. \d{4}: 4자리 숫자
  2. (-| )?: 하이픈(-) 또는 공백(``)이 선택적으로 포함
  3. {3}: 앞의 패턴이 3번 반복

const answer_inputs = ['1234-5678-9101-1121', '1234 5678 9101 1121', '1234567891011121'];
const wrong_inputs = ['1234-5678-91011121', '1234-5678-910A-1121', '1234 56789101 1121'];
const regexp = /^\d{4}(-| )?\d{4}(-| )?\d{4}(-| )?\d{4}$/;

8. 숫자와 단위가 함께 오는 값

• 사용된 패턴
  1. \d+: 숫자를 탐지
  2. (kg|cm|m|km): 단위를 탐지

const answer_inputs = ['50kg', '180cm', '10km', '5m'];
const wrong_inputs = ['50', '180 cm', '10meters', '5.5kg'];
const regexp = /^\d+(kg|cm|m|km)$/;

9. 소문자 영어로 시작하고 숫자로 끝나는 문자열

• 사용된 패턴
  1. ^[a-z]: 소문자로 시작
  2. \d$: 숫자로 끝남
  3. .*: 시작과 끝 사이에 임의의 문자(0개 이상)가 올 수 있음.

const answer_inputs = ['a123', 'z987', 'b1'];
const wrong_inputs = ['123a', 'A123', 'abc'];
const regexp = /^[a-z].*\d$/;

10. 16진수 색상코드 검증

• 사용된 패턴
  1. ^#: 색상코드는 항상 #로 시작
  2. [0-9A-Fa-f]{6}: 16진수 6자리

const answer_inputs = ['#FFFFFF', '#000000', '#1A2B3C'];
const wrong_inputs = ['#FFF', '#12345G', '123456'];
const regexp = /^#[0-9A-Fa-f]{6}$/;