해당 글은 모던 자바스크립트 Deep Dive를 참고하여 작성하였습니다.

글을 들어가며...

프론트엔드 개발을 하다보면 로그인 폼에서 사용자의 입력이 아이디로 사용 가능한 입력인지 확인하거나, 회원가입시 사용자가 입력한 비밀번호가 숫자와 영문자와 특수문자를 포함한 번호인지 확인하는 과정이 필요하다. 이는 정규 표현식을 통해서 확인할 수 있으며, 자바스크립트에 국한된 방법이 아닌 다른 언어에서도 사용이 가능하다. 이 글은 자바스크립트를 기준으로 정규 표현식과, 정규 표현식을 활용한 메서드들을 소개하려고 한다.

정규 표현식

정규 표현식이란

특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.
regular expression, 간단히 RegExp로 부른다.

위키 백과 - 정규 표현식

자바스크립트는 정규 표현식을 사용하여 문자열을 대상으로 패턴 매칭 기능을 제공한다.

RegExp 메서드

자바스크립트가 제공하는 RegExp메서드는 전달받은 문자열에 대해 정규 표현식 패턴을 검색한다.
따라서 해당 문자열이 정규 표현식 조건에 만족하는지 알아낼 수 있어서 매우 유용하다.

String메서드에서도 정규 표현식을 사용하여 만족하는 문자열은 몇 개가 존재하는지 알아낼 수 있어서 매우 유용하다. 이제 RegExp 메서드와 String 메서드에서 정규 표현식을 활용한 예를 알아보자.

RegExp.prototype.exec

exec 메서드는 인수로 전달받은 문자열에 대하여 정규 표현식 패턴을 검색하여, 매칭 결과를 배열로 반환한다. 하지만 한 가지 경우만 반환하므로, 여러 개가 매칭되더라도 하나만 알 수 있다.

const target = 'Is this all there is?';
const regExp = /is/;

regExp.exec(target);
//  ["is", index: 5, input: "Is this all there is?", groups: undefined]

RegExp.prototype.test

test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식 패턴을 검색하여 매칭 결과를 불리언으로 반환한다. 불리언을 반환 되기 때문에 몇 가지가 매칭되었는지는 알 수 없다.

const target = 'Is this all there is?';
const regExp = /is/;

regExp.test(target); // true

String.prototype.match

match 메서드는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환한다. 따라서 위 메서드들의 단점을 보완하여 몇 가지가 매칭되었는지 알 수 있다.

const target = 'Is this all there is?';
const regExp = /is/g;

target.match(regExp); // ["is", "is"]

플래그 (i, g, m)

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식 검색 방법을 설정하기 위해 사용된다.
플래그는 총 6가지가 있지만, 그 중 3가지를 소개하면 다음과 같다.

1. i (Ignore case)
   대소문자를 구별하지 않고 패턴을 검색한다.

2. g (Global)
   대상 문자열 내에서 패턴과 일치하는 모든 문자열을 검색한다.

3. m (Multi line)
   문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

패턴

패턴은 문자열의 일정한 규칙을 표현하기 위해 사용하며, 정규 표현식의 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.
패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다.

const RegExp = /{패턴}/{플래그};

자주 사용하는 정규 표현식

특정 단어로 끝나는지 검사

$ 를 사용하여 js로 끝나는지 확인한다.

const fileName = 'app.js';

// 'js'로 끝나는지 검사한다.
/js$/.test(fileName); // true

숫자로만 이루어진 문자열인지 검사

const target = '12345';
// 숫자로만 이루어진 문자열인지 검사한다.

/^\d+$/.test(target); // true

빈 문자열인지 검사

const target = '';

/^$/.test(target); // true

하나 이상의 공백으로 시작하는지 검사

\s 는 여러가지 공백문자를 의미한다.

const target = ' Hi!';

// 하나 이상의 공백으로 시작하는지 검사한다.
/^[\s]+/.test(target); // true

아이디로 사용 가능한지 검사

const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.

/^[A-Za-z0-9]{4,10}$/.test(id); // true

메일 주소 형식에 맞는지 검사

const email = 'ungmo2@gmail.com';

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.
test(email); // true

한글인지 검사

const target = '강희';

// 완전한 한글인지 공백을 포함하여 검사함
/^[가-힣\s]+$/g.test(target); // true

핸드폰 번호 형식에 맞는지 검사

const cellphone = '010-1234-5678';

/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // true

글을 마무리하며

정규 표현식은 프론트엔드와 백엔드에서 모두 사용되므로 외우진 않더라도 잘 알아두면 좋다. 또한 코딩 테스트에서 구현하는 문제에서도 편하게 사용될 수 있으니, 해당 글에 나와있는 정도는 숙지하도록 하면 좋겠다.