정규표현식은 볼 때마다 작성하기 어려워서, 자주 쓰는 규칙을 정리해 두었습니다.

---

정규표현식이란?

• 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.
• 장점: 문자열 처리에 강력합니다.
• 단점: 가독성이 떨어집니다.

이메일, 비밀번호, 아이디, 닉네임, 숫자 콤마 등 정규표현식은 생각보다 자주 쓰입니다. 프론트엔드 개발자라면 이런 정규표현식을 작성하고, 나아가 유효성 검사까지 구현할 수 있어야 합니다.

1. 정규표현식 기본 규칙

1-1. 기본 규칙

// RegExp 객체를 이용하는 방법
const regex = new RegExp(pattern, flag);
ex) const regex = new RegExp(pattern, 'g');

// 객체초기화 방법
const regex = /pattern?/flag;
ex) const regex = /pattern?/g;

flag

• g (global) (패턴에 매치되는 모든 문자열)
• m (multiline) (행이 바뀌어도 찾기)
• i (ignoreCase) (대소문자를 구분하지 않음)

1-2. 그룹 지정

• | (또는) : /Hi | Hello/gm
• () (그룹 지정) : /(Hi | Hello) | (And)/gm
• (?:) (그룹 미지정, 찾지만 기억하지는 않음) : /gr(?:a|e)y/gm => /gr(a|e)y/gm : gr로 시작하고 중간에 a 또는 e, 마지막은 y로 끝나는 문자열 (gray / grey)
• [] (괄호 안의 어떤 문자든 찾아라) : /gr[ae]y/gm /gr[a-f]y/gm /[a-zA-Z0-9]/gm
• [^] (괄호 안의 어떤 문자든 제외하고 찾아라) : /[^a-z]/gm

1-3. 수량

• ? (없거나 있거나) : /gra?y/gm a가 있거나 없거나 (gray / gry)
• * (없거나 있거나 많거나) : /gra*y/gm (gry / gray / graay / graaay)
• + (하나 또는 많이) : /gra+y/gm (gray / graay / graaay)
• {n} (n번 반복) : /gra{2}y/gm
• {n,} (최소 n번 이상) : /gra{2,}y/gm
• {n, m} (최소 n번 이상, m번 이하) : /gra{2,3}y/gm

1-4. 단어 경계

• \b (단어 경계) : /\bHa/gm (Ha / Harry / Hamster), /Ha\b/gm (Ha / HaHaHa)
• \B (단어 경계가 아님) : /Ha\B/gm (HaHaHa)
• ^ (문장의 시작) : /^Ha/gm (HaHaHa)
• $ (문장의 끝) : /Ha$/gm (HaHaHa)

1-5. 문법 정리

• . (줄바꿈 문자를 제외한 모든 문자) : /./gm
• \ (특수문자를 일반 문자로 처리) : /\[\]/gm ([])
• \d (숫자)
• \D (숫자를 제외한 모든 것)
• \w (모든 문자열 : 알파벳, 숫자, _)
• \W (문자를 제외한 모든 것)
• \s (띄어쓰기)
• \S (띄어쓰기를 제외한 모든 것)

2. 정규표현식 메서드

• String
  • match (매치된 문자열을 배열로 반환, 매치가 안되면 null을 반환)
  • replace (매치된 문자열을 지정한 문자열로 치환)
  • search (매치된 문자열의 인덱스 반환, 매치가 안되면 -1을 반환 )
  • split (매치된 문자로 문자열을 분할하여 배열로 반환)

• RegExp
  • exec (매치된 문자열 하나를 배열로 반환, 매치가 안되면 null을 반환 )
  • test (매치되면 true, 안되면 false 반환 )

3. 자주 사용하는 정규표현식

3-1. 이메일

let regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

if(input.value.match(regExp) !== null){
	매치가 되었을경우 (즉 이메일 양식이 맞춰졌을경우)
}else{
	매치가 안되었을경우
};

3-2 패스워드

// 8자~16자, 숫자/영어대소문자/특수문자를 모두 포함
let regExp = /^(?=.*?[a-zA-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$/;

3-3 숫자 콤마

let price = 10000000;
let regExp = /\B(?=(\d{3})+(?!\d))/g
price.toString().replace(regExp, ",");