[JavaScript DeepDive] 31장_RegExp

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다.

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

 

// 사용자로부터 입력받은 휴대폰 전화번호
const tel = '010-1234-567팔';

// 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다.
const regExp = /^\d{3}-\d{4}-\d{4}$/;

// tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다.
regExp.test(tel); // -> false

전화번호를 체크하는 형식이 필요할 때 위와 같이 정규표현식으로 패턴을 파악하면 간단하다.

하지만 이를 조건문을 통해 판단할려면 수 많은 if문으로 해결해야한다.

 

정규표현식을 사용하면 반복문과 조건문 없이 패턴을정의하고 체크할 수 있지만 여러 가지 기호를 혼합해서 사용하기 때문에 가독성이 좋지는 않고 기호를 파악하기 어렵다는 단점이 있다.

 

✍ 정규 표현식의 생성

정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다.

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

// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
// 정규 표현식 리터럴 방식
const regexp = /is/i;

// 정규 표현식 생성자 함수 방식
const regexp = new RegExp(/is/i); // ES6
// const regexp = new RegExp(/is/, 'i');
// const regexp = new RegExp('is', 'i');

// test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
regexp.test(target); // -> true

 

✍ RegExp 메서드

📌 RegExp.prototype.exec

exec 메서드는 인스로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다. 매칭 결과가 없는 경우 null을 반환한다.

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

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

exec 메서드는 첫 번째 매칭 결과만 반환한다.

 

📌 RegExp.prototype.test

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

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

regExp.test(target); // -> true

 

📌 RegExp.prototype.match

String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.

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

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

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

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

 

✍ 플래그

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 바식을 설정하기 위해 사용한다.

총 6개가 존재하지만 중요한 3개의 플래그를 살펴보자.

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

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

// target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색한다.
target.match(/is/);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색한다.
target.match(/is/i);
// -> ["Is", index: 0, input: "Is this all there is?", groups: undefined]

// target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색한다.
target.match(/is/g);
// -> ["is", "is"]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// -> ["Is", "is", "is"]

 

✍ 자주 사용하는 정규 표현식

📌 특정 단어로 시작하는 검사 예시

const url = 'https://example.com';

// 'http://' 또는 'https://'로 시작하는지 검사한다.
/^https?:\/\//.test(url); // -> true

// 다른 방식의 검사
/^(http|https):\/\//.test(url); // -> true

 

📌 특정 단어로 끝나는지 검사 예시

const fileName = 'index.html';

// 'html'로 끝나는지 검사한다.
/html$/.test(fileName); // -> 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 cellphone = '010-1234-5678';

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

 

📌 특수 문자 포함 여부 및 제거 방식

const target = 'abc#123';

// A-Za-z0-9 이외의 문자가 있는지 검사한다.
(/[^A-Za-z0-9]/gi).test(target); // -> true

target.replace(/[^A-Za-z0-9]/gi, ''); // -> abc123

 

👨‍💻 코딩 테스트에서 엄청 유용하게 사용되는 정규 표현식에 관한 내용을 일부 정리했다.

문자열이나 숫자 조건이 많은 문제들은 무조건 정규 표현식을 활용하게끔 유도한 문제이다. 정규 표현식을 잘 모르고 풀었을 때는 조건문을 엄청 마구잡이로 사용해서 해결했지만, 다른 코드를 참고한 후에는 한두 줄로 해결을 했던 기억이 있다. 이처럼 정규 표현식은 매우 중요하다. 물론 문자가 의미하는 조건을 외우기는 힘들다. 그때그때 필요할 때 구글링을 통해 활용될 것 같다.