정규표현식(Regular Expression)

 

문자열에서 특정 내용을 찾거나 대체, 발췌할 때 사용

ex) 회원가입 화면 - 사용자로부터 전화번호 입력 받을 때, 전화번호가 유효한 지 체크하는 경우

const tel = '0101253128&';

// 정규 표현식 리터럴
const myRegExp = /^[0-9]+$/;
console.log(myRegExp.test(tel)); // false

전화번호에 오타를 내는 경우가 더러 있기 때문에 제대로 된 전화번호를 입력하지 않은 경우를 체크하기 위해서는 이러한 정규표현식이 필요하다.

 

다만, 정규표현식은 주석이나 공백을 허용하지 않고 여러 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 단점이 있다.

 

정규표현식은 리터럴 표기법으로 생성 가능하고 위의 사진과 같이 표현할 수 있다.

정규표현식을 사용하는 JAVASCRIPT 메소드
RegExp.prototype.exec, RegExp.prototype.test, String.prototype.match, String.prototype.replace, String.prototype.search, String.prototype.split 등

---

1. 플래그(Flag)

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

플래그는 옵션, 선택적으로 사용한다.

사용하지 않은 경우, 문자열 내 검색 매칭 대상이 1개 이상이라도 1번째 매칭한 대상만 검색하고 종료

---

2. 패턴(Pattern)

검색하고 싶은 문자열을 지정

따옴표를 포함하면 따옴표까지도 검색하기 때문에 문자열의 따옴표는 생략하고 지정한다.

패턴은 특별한 의미를 가지는 Metacharacter 또는 기호로 표현

정규식 패턴	설명	패턴 종류	예제
\w	문자만 허용	(a-z, A-Z, 0-9, ...)	String REGEXP_PATTERN_CHAR = "^[\w]*$";
\W	문자가 아닌 경우만 허용	! (a-z, A-Z, 0-9, ...)	String REGEXP_PATTERN_CHAR = "^[\W]*$";
\d	숫자만 허용	(0-9)	String REGEXP_PATTERN_NUMBER = "^[\d]*$";
\D	숫자가 아닌 경우만 허용	! (0-9)	String REGEXP_PATTERN_NO_NUMBER = "^[\D]*$";
\s	공백 문자, 탭만 허용	(space, tab, newline)	String REGEXP_PATTERN_SPACE_CHAR = "^[\s]*$";
\S	공백 문자, 탭이 아닌 경우만 허용	! (space, tab, newline)	String REGEXP_PATTERN_NO_SPACE_CHAR = "^[\S]*$";
^	특정 문자열로 시작		String regExp = "^www";
[^]	부정(not)		const regExp = /^\d+$/;
$	특정 문자열로 끝		String regExp = "^com$";
.	임의의 문자 1개		const regExp = / ... /;
+	분해되지 않은 단어 레벨로 추출		const regExp = / A+|B|/g;

 

---

3. RegExp Constructor

자바스크립트는 정규표현식을 위해 RegExp 객체를 지원

리터럴 방식과 RegExp 생성자 함수를 사용해 객체 생성 가능

new RegExp(pattern[, flags])

4. RegExp Method

4.1. RegExp.prototype.exec(target: string): RegExpExecArray | null

문자열을 검색해 매칭 결과 반환

반환값: 배열 | null

* exec 메소드는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환

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

const res = regExp.exec(target);
console.log(res); // [ 'is', index: 5, input: 'Is this all there is?' ]

4.2. RegExp.prototype.test(target: string): boolean

문자열 검색해 매칭 결과 반환

반환값: true | false

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

const res = regExp.test(target);
console.log(res); // true

---

참고자료

• https://poiemaweb.com/js-regexp
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions