[JavaScript] 정규 표현식 (Regular Expressions) 이해하기

정규 표현식

• 문자열에서 특정 문자 조합을 찾기 위한 패턴
• JavaScript에서의 정규 표현식은 객체이다
• RegExp의 exec()와 test() 메서드를 사용할 수 있다
• String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있다

 

정규 표현식 만들기

1. 정규 표현식 리터럴
   • 슬래시(/)로 패턴을 감싸서 작성
   • 바뀔일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다
   • const re = /ab+c/
2. RegExp 객체의 생성자 호출
3. const re = new RegExp('ab+c')

정규 표현식 패턴 작성하기

• 단순한 문자로 구성되거나 단순한 문자와 특수 문자의 조합으로 구성할 수 있다
• (\d+)\.\d*/ 에 나타난 괄호는 정규 표현식에서 기억 장치처럼 쓰여서, 괄호 안쪽 패턴과 일치한 부분을 나중에 사용할 수 있도록 기억한다

단순 패턴 사용하기

• 문자열을 이쓴 그대로 탐색할 때 사용
• /abc/ 패턴은 문자열에서 정확한 순서대로 'abc'라는 문자의 조합이 나타나는 부분과 일치

특수 문자 사용하기

• 직접적인 일치 이상의 탐색이 필요할 때는 특수문자를 사용

(예) 하나의 "a" 이후에 0개 이상의 "b", 그 뒤의 "c"와 일치해야 하면 /ab*c/ 패턴을 사용
"b" 뒤의 *는 "이전 항목의 0번 이상 반복"을 의미합니다. 이 패턴을 문자열 "cbbabbbbcdebc"에 대해 사용하면, 일치하는 부분 문자열은 "abbbbc"일 것

 

 

이스케이핑

• 특수 문자를 있는 그대로 탐색해야 하는 경우 특수 문자 앞에 역슬래시를 배치해서 이스케이프 해야 한다

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $&은 일치한 문자열 전체를 의미
}

const re = /\/example\/[a-z]/   // 이스케이핑 사용

 

 

정규표현식 메서드

• .match : 문자열에서 정규표현식에 매칭되는 항목들을 배열로 반환
• .replace : 정규표현식에 매칭되는 항목을 "대체문자열"로 변환
• .split : 문장려을 정규표현식에 매칭되는 항목으로 쪼개어 배열로 반환
• .test : 문자열이 정규표현식과 매칭되면 true, 아니면 false 반환
• .exec : match 매서드와 유사하지만 무조건 첫 번째 매칭 결과만 반환

 

플래그를 활용한 탐색

i	Ignore case	대소문자를 구별하지 않고 검색
g	global	문자열 내의 모든 패턴을 검색
m	multi linie	문자열의 행이 바뀌더라도 계속 검색
s		개행 문자가 .과 일치
u	unicode	유니코드 전체를 지원
y	sticky	문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드 활성화

const re = /pattern/flags;

// 생성자를 사용할 경우
const re = new RegExp('pattern', 'flags');

 

 

정규표현식을 활용한 예시

• 로그인 시 조건 주기
  • 이메일 : 무조건 @가 들어가야 한다
  • 비밀번호 : 8자리 이상 영문자, 숫자, 특수문자 조합

// util.js
export const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
export const pwRegex =
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

// auth.js
import { emailRegex, pwRegex } from "../util.js";

...

// 유효성 검사 진행
  if (!emailVal) {
    alert("이메일을 입력해주세요");
    email.focus();
    return;
  }
  if (!pwVal) {
    alert("비밀번호를 입력해주세요");
    pw.focus();
    return;
  }

  const correctEmail = emailVal.match(emailRegex);
  const correctPW = pwVal.match(pwRegex);

  if (correctEmail === null) {
    alert("이메일 형식에 맞게 입력해주세요!");
    email.focus();
    return;
  }
  if (correctPW === null) {
    alert("비밀번호는 8자리 이상 영문자, 숫자, 특수문자 조합이어야 합니다!");
    pw.focus();
    return;
  }

...

 

 

 

 

 

---

프로그래머스에서 문제 풀 때 다른 사람들의 풀이를 보다가 정규 표현식으로 푼게 있어서

이번 기회에 공부해봤다. 아직 이론만 보고 직접 실습해본 건 로그인 구현 때가 처음이라서 좀 헷갈리지만...

계속 문제를 풀든 프로젝트를 하든 해서 익숙해져야겠다.

 

참조:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN