자바스크립트의 정규 표현식 알아보기

정규표현식이란?

정규표현식이란, 문자열 검색, 치환, 검증 등을 위해 사용되는 패턴 매칭 기법이다.

대표적으로, 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은 값을 입력하는 경우 유효성 검사를 위해 사용한다.

주로 아래와 같이 사용된다.

• 문자열 검색
  주어진 문자열에서 특정 패턴을 가진 문자열을 찾을 때 사용된다.
  예: 이메일 주소, 전화번호, 주민등록번호 등을 찾는 데 사용
• 문자열 검증
  사용자 입력 데이터가 특정 형식을 만족하는지 확인할 때 사용된다.
  예: 이메일 주소, 비밀번호, 주소 형식 등을 검증하는 데 사용
• 문자열 치환
  특정 패턴을 가진 문자열을 다른 문자열로 변경할 때 사용된다.
  예: 문서에서 특정 단어를 다른 단어로 변경하거나, HTML 태그를 제거하는 데 사용
• 문자열 분할
  특정 패턴을 기준으로*문자열을 분할할 때 사용된다.
  예: 문자열을 공백 문자나 쉼표 기준으로 분할하는 데 사용
• 파일 경로 및 파일명 처리
  파일 경로나 파일명에서 특정 패턴을 찾거나 변경할 때 사용된다.
  예: 파일명에서 확장자를 제거하거나, 특정 디렉토리 내의 파일을 찾는 데 사용
• 데이터 검증 및 정제
  데이터베이스 입력 데이터나 API 응답 데이터 등을 검증하고 정제할 때 사용된다.
  예: 숫자, 날짜, 이메일 형식 등을 검증하는 데 사용

정규식 구성

/ 사이에 패턴을 입력하고 플래그를 통해 검색옵션을 지정한다.

// 리터럴 방식
const regex = /aa/;

// 생성자 방식
const regex = new RegExp("aa");
const regex = new RegExp(/aa/); // 이렇게도 생성 가능하다.

자바스크립트에서의 정규식 메서드

• "문자열".match(/정규표현식/플래그) : 문자열 검색

• "문자열".replace(/정규표현식/, "대체문자열") : 문자열 치환

• "문자열".split(정규표현식) : 문자열 분할

• 정규표현식.test("문자열") : 문자열 검증

• 정규표현식.exec("문자열") : 문자열 검색

// "문자열"이 "정규표현식"과 매칭되는지 확인
const regex = /developer/;
regex.test("Hello I am developer"); // true

// "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
const txt = "Hello I am developer";
txt.match(regex); // ['developer']

// "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
txt.replace(regex, "student"); // "Hello I am student"

정규식 플래그

정규식 플래그는 정규식의 동작을 변경하여 특정한 방식으로 검색과 대체를 수행할 수 있게 한다. 쉽게 말해 정규식 검색옵션을 설정해주는 것이다.
정규식 플래그를 여러개를 동시에 사용하여 더 세부적인 검색을 할 수 있다.

• i (Ignore Case): 대/소문자를 구분하지 않고 검색한다.
  예: /pattern/i는 "Pattern", "pattern", "PATTERN" 등 모두 일치시킨다.

const str = "bcAbc";
str.match(/a/i); // ['A', index: 0, input: 'AbcAbc', groups: undefined]

• g (Global): 문자열 전체에서 모든 일치 항목을 찾는다
  예: /pattern/g는 문자열에서 "pattern"이 여러 번 나오면 모두 찾는다

const str = "abcabc";
str.match(/a/g); // (2) ["a", "a"]

• m (Multiline): 문자열이 여러 줄로 구성된 경우 각 줄을 독립적으로 처리한다.
  예: /^pattern$/m는 각 줄의 시작과 끝에서 "pattern"을 찾는다.

const str = "Frontend\nBackend\nOMG";
// Backend로 시작하는지 검사(^는 문장 시작점을 의미한다.)
str.match(/^Backend/); // null, 다음 줄은 검사가 되지 않음
str.match(/^Backend/m); // ['Backend', index: 13, input: 'Frontend and\nBackend\nOMG', groups: undefined]

• s (Dotall): 줄바꿈 문자를 포함한 모든 문자와 일치시킨다..
  예: /pattern.example/s는 "pattern\nexample"과 일치한다.

• u (Unicode): 유니코드 문자열을 처리한다.
  예: /𝄞/u는 음악 기호 '온음표'와 일치한다.

• y (Sticky): 마지막 일치 항목 바로 다음부터 검색을 시작한다.
  예: /\d+/y는 "123 456 789"에서 "123", "456", "789"를 순서대로 찾는다.

참고
정규 표현식(Regular Expression)
RegExr : 정규 표현식 테스트 사이트
패턴과 플래그
정규표현식 학습 사이트