[javascript] RegExp

RegExp

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.

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

정규 표현식은 일정한 패턴의 문자열을 검색하거나 치환이 가능하기 때문에 휴대폰 번호나 이메일 등의 일정한 패턴이 있는 문자열에 대입이 가능하다.

const phone = '010-1234-5육7팔';

// 정규 표현식 리터럴로 휴대폰 번호 패턴을 정의
const regExp = /^\d{3}-\d{4}-\d{4}$/;
regExp.test(phone);		// false

정규 표현식의 생성

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

정규 표현식 리터럴

정규 표현식 리터럴은 패턴과 플래그로 구성되어 있다.

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

// 패턴 : is
// 플래그 : i > 대소문자 미구분
const regExp = /is/i;
regExp.test(text);		// true

생성자 함수

const text = 'Is this all there is?';
const regExp = new RegExp(/is/i);
// const regExp = new RegExp(/is/, 'i');
// const regExp = new RegExp('is', 'i');
regExp.test(text);		// true

const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;
count('Is this all there is?', 'is');	// 3
count('Is this all there is?', 'xx');	// 0

exec

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

❗ exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환하기 때문에 주의한다.

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

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

test

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

match

대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.

const text = 'Is this all there is?';
// exec와 다르게 g플래그 사용 가능
const regExp = /is/g;

regExp.exec(text);	// ['is', 'is']

📍 플래그

정규 표편식의 검색 방식을 설정하기 위해 사용한다. 플래그는 옵션이라 선택적으로 사용 가능하며, 하나 이상의 플래그를 동시에 설정할 수도 있다.

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

대소문자를 구별하여 한 번만 검색

text.match(/is/);

대소문자를 구별하지 않고 한 번만 검색

text.match(/is/i);

대소문자를 구별하여 전역 검색

text.match(/is/g);

대소문자를 구별하지 않고 전역 검색

text.match(/is/ig);

🎈 패턴

패턴은 /로 열고 닫으며, 특별한 의미를 가지는 메타문자 또는 기호로 표현할 수 있다.

임의의 문자열 검색

.은 임의의 문자 한개를 의미한다. 문자의 내용은 무엇이든 상관없으며, .을 여러개 찍으면 찍은 개수의 만큼 임의의 문자를 검색한다.

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

// 임의의 3자리 문자열을 전역 검색
text.match(/.../g);	// ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']

반복 검색

{m,n}은 앞선 패턴(A)이 최소 m번, 최대 n번 반복되는 문자열을 의미한다.

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다. 즉, {1,}과 같음
?는 앞선 패턴이 최대 한번(0번 포함) 이상 반복되는 문자열 의미 {0,1}과 같음

const text = 'A AA B BB Aa Bb AAA';

// A가 최소 1번, 최대 2번 반복되는 문자열 전역 검색
text.match(/A{1,2}/g);		// ['A', 'AA', 'A', 'AA', 'A']

// A가 2번 반복되는 문자열 전역 검색
text.match(/A{2}/g);		// ['AA', 'AA']

// A가 최소 2번 이상 반복되는 문자열 전역 검색
text.match(/A{2,}/g);		// ['AA', 'AAA']

// A가 최소 한번 이상 반복되는 문자열 전역 검색
text.match(/A+/g);			// ['A', 'AA', 'A', 'AAA']

// 'colo' 다음 u가 최대 한번 이상 반복되고 r이 이어지는 문자열 전역 검색
const target = 'color colour';

target.match(/colou?r/g);	// ['color', 'colour']

OR 검색

|은 or의 의미를 갖는다. /A|B/ 는 A 또는 B를 의미한다.

const text = 'A AA B BB Aa Bb ZZ 12,345 _$%&';

// A or B
text.match(/A|B/g);		// ['A', 'A', 'A', 'B', 'B', 'B', 'A', 'B']

// A or B가 한번 이상 반복되는 문자열 전역 검색
text.match(/A+|B+/g);	// ['A', 'AA', 'B', 'BB', 'A', 'B']
text.match(/[AB]+/g);	// ['A', 'AA', 'B', 'BB', 'A', 'B']

// A ~ Z가 한번 이상 반복되는 문자열 전역 검색
text.match(/[A-Z]+/g);	// ['A', 'AA', 'B', 'BB', 'A', 'B', 'ZZ']
text.match(/[A-Za-z]+/g);	// 이것도 가능

// 숫자 검색시, 쉼표를 추가하여 검색해 준다. 안그럼 문자열로 분리 됨
text.match(/[0-9,]+/g);	// ['12,345']

// 알파벳, 숫자, 언더스코어, ,가 한 번 이상 반복
text.match(/[\w]+/g);	// ['A', 'AA', 'B', 'BB', 'Aa', 'Bb', 'ZZ', '12,345', '_']

NOT 검색

[...] 내의 ^은 not을 의미한다.

const text = 'A AA 12 Aa Bb';

// 대문자를 제외한 나머지 검색
text.match(/[^A-Z]/g);	// [' ', ' ', '12 ', ' a', ' b']

☕ 자주 사용하는 정규식

특정 단어로 시작하거나 끝나는 프론트에서 자주 사용하는 정규식은 기억하는 것이 좋다.

특정 단어로 시작 / 끝나는 문자 검사

바깥의 ^는 문자열의 시작을 의미하고, ?는 앞선 패턴이 최대 한 번이상 반복되는 지를 의미

const url = 'https://www.ppp.com';
const path = 'https://www.ppp.com/category';

// 특정 단어로 시작
/^https?:\/\//.test(url);	// true

// 특정 단어로 끝
/category$/.test(path);		// true

숫자나 하나 이상의 공백으로 이루어진 문자열 검사

$는 문자열 마지막 의미, \d는 숫자 의미.

const num = '12345';
const text = ' Hi';

// 숫자로만 이루어진 문자열
/^\d+$/.test(num);		// true

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

아이디/메일/핸드폰 주소 유효성 검사

{4,10}은 4~10자리로 이루어진 알파벳 대소문자 또는 숫자를 의미한다.

const id = 'abc123';
const email = 'ddoyun9@gmail.com';
const phone = '010-1234-5678';

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

// 메일 주소 형식 검사
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email);					// true

// 핸드폰 번호 형식 검사
/^\d{3}-\d{3,4}-\d{4}$/.test(phone);   // true