정규표현식

1. 정규표현식

문자열의 특정 패턴을 찾을 수 있는 문법입니다.

예를들면 회원가입 화면에서 사용자로부터 입력받은 아이디, 이름, 이메일형식이 유효한지 체크할 필요가 있습니다. 이때 정규표현식을 사용하면 간단히 처리할 수 있습니다.

const tel = '0101234567팔';
 
// 정규 표현식 리터럴
const myRegExp = /^[0-9]+$/;

 

반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있습니다. 하지만 가독성이 좋지 않다는 단점이 존재합니다.

정규표현식은 아래와 같이 표현합니다.

정규 표현식 리터럴

1.2 플래그

플래그는 아래와 같은 종류가 있습니다.

Flag	Meaning	Description
i	Ignore Case	대소문자를 구별하지 않고 검색한다.
g	Global	문자열 내의 모든 패턴을 검색한다.
m	Multi Line	문자열의 행이 바뀌더라도 검색을 계속한다.

플래그는 옵션이므로 선택적으로 사용합니다. 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 매칭한 대상만을 검색하고 종료합니다.

const targetStr = 'Is this all there is?';
 
// 문자열 is를 대소문자를 구별하여 한번만 검색한다.
let regexr = /is/;
 
console.log(targetStr.match(regexr)); // [ 'is', index: 5, input: 'Is this all there is?' ]
 
// 문자열 is를 대소문자를 구별하지 않고 대상 문자열 끝까지 검색한다.
regexr = /is/ig;
 
console.log(targetStr.match(regexr)); // [ 'Is', 'is', 'is' ]
console.log(targetStr.match(regexr).length); // 3

. 은 임의의 문자 한 개를 의미합니다. 문자의 내용은 무엇이든지 상관없습니다. 위 예제의 경우 . 를 3개 연속해서 패턴을 생성하였으므로 3자리 문자를 추출합니다.

console.log(targetStr.match(regexr)); // [ 'AA ', index: 0, input: 'AA BB Aa Bb' ]

const targetStr = 'AA BB Aa Bb 24,000';
 
// '0' ~ '9'가 한번 이상 반복되는 문자열을 반복 검색
const regexr = /[0-9]+/g;
 
console.log(targetStr.match(regexr)); // [ '24', '000' ]

const targetStr = 'AA BB Aa Bb 24,000';
 
// '0' ~ '9' 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
let regexr = /[\d,]+/g;
 
console.log(targetStr.match(regexr)); // [ '24,000' ]
 
// '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
regexr = /[\D,]+/g;
 
console.log(targetStr.match(regexr)); // [ 'AA BB Aa Bb ', ',' ]

/w는 알파벳과 숫자를 의미합니다. \W는 \w와 반대로 동작합니다.

const targetStr = 'AA BB Aa Bb 24,000';
 
// 알파벳과 숫자 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
let regexr = /[\w,]+/g;
 
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'Aa', 'Bb', '24,000' ]
 
// 알파벳과 숫자가 아닌 문자 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
regexr = /[\W,]+/g;
 
console.log(targetStr.match(regexr)); // [ ' ', ' ', ' ', ' ', ',' ]

 

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

• 특정 단어로 시작하는지 검사

const url = 'http://example.com';
 
// 'http'로 시작하는지 검사
// ^ : 문자열의 처음을 의미한다.
const regexr = /^http/;
 
console.log(regexr.test(url)); // true

• 특정 단어로 끝나는지 검사

const fileName = 'index.html';
 
// 'html'로 끝나는지 검사
// $ : 문자열의 끝을 의미한다.
const regexr = /html$/;
 
console.log(regexr.test(fileName)); // true

• 숫자인지 검사

const targetStr = '12345';
 
// 모두 숫자인지 검사
// [^]: 부정(not)을 의미한다. 얘를 들어 [^a-z]는 알파벳 소문자로 시작하지 않는 모든 문자를 의미한다.
// [] 바깥의 ^는 문자열의 처음을 의미한다.
const regexr = /^\d+$/;
 
console.log(regexr.test(targetStr)); // true

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

const targetStr = ' Hi!';
 
// 1개 이상의 공백으로 시작하는지 검사
// \s : 여러 가지 공백 문자 (스페이스, 탭 등) => [\t\r\n\v\f]
const regexr = /^[\s]+/;
 
console.log(regexr.test(targetStr)); // true

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

const id = 'abc123';
 
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;
 
console.log(regexr.test(id)); // true

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

const email = 'ungmo2@gmail.com';
 
const regexr = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
 
console.log(regexr.test(email)); // true

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

const cellphone = '010-1234-5678';
 
const regexr = /^\d{3}-\d{3,4}-\d{4}$/;
 
console.log(regexr.test(cellphone)); // true

• 특수 문자 포함 여부를 검사

const targetStr = 'abc#123';
 
// A-Za-z0-9 이외의 문자가 있는지 검사
let regexr = /[^A-Za-z0-9]/gi;
 
console.log(regexr.test(targetStr)); // true
 
// 아래 방식도 동작한다. 이 방식의 장점은 특수 문자를 선택적으로 검사할 수 있다.
regexr = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
 
console.log(regexr.test(targetStr)); // true
 
// 특수 문자 제거
console.log(targetStr.replace(regexr, '')); // abc123