[JS] 자바스크립트 정규표현식

정규표현식(regex)이란?

: 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 언어.
정규표현식을 사용하면, 복잡한 조건문이 아닌 한줄로 간단히 표현할 수 있다.(가독성은 떨어지기 때문에 숙지필수!) 주로 문자열의 검색과 치환을 위한 용도로 쓰인다.

언제 쓸까?

• text에서 원하는 특정 pattern을 찾을 때 (전화번호/ 홈페이지 등)
• pattern을 다른 문자열로 변환
• 사용자가 입력한 데이터가 특정 pattern에 유효한지 유효성 검사 (이메일 / 비밀번호)

사용법

1. 기본규칙

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

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

+) flag

• g(global) (매칭될 수 있는 다수의 결과값을 기억)
• m(multiline) (행이 바뀌어도 찾기)
• case insensitive (대소문자 구분X)

2. group & range

• | (또는) : /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

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

4. 단어 경계

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

5. 문법정리

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

// regex로 전화번호 찾기
/\d{2,3}[-. ]\d{3}[-. ]\d{4}/gm

// regex로 이메일 찾기
/[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9.]+/gm

// regex로 아이디만 가져오기
/([a-zA-Z0-9-]{11})/gm
  
// regex 활용
const regex = /([a-zA-Z0-9-]{11})/gm
const url = 'https://www.youtu.be/-ZClicWm0zM'
url.match(regex)  // [매칭되는 전체 문자열, 매칭되는 그룹]
const result = url.match(regex)
result[1]  // 찾고자 하는 유튜브 아이디

연습링크 및 참고

• https://regexr.com/5ml92
• https://regexone.com/
• https://www.youtube.com/watch?v=t3M6toIflyQ