Regular Expression(정규표현식)과 RegExp 객체

정규표현식이란 특정 패턴의 문자열을 의미하며, 이를 통해 이 문자열에서 특정 단어나, 특정 패턴을 가진 문자열을 찾아낼 수 있다.

자바스크립트는 기본 내장(Built-in)객체로 RegExp 객체를 탑재하며, RegExp 객체의 test 또는 exec 메소드를 이용해 정규표현식을 이용한 패턴 매칭이 가능하다.

정규 표현식 패턴(Regular Expression Pattern)생성하기

정규 표현식의 패턴 여러 문자들로 이루어지며 사용자는 원하는 패턴을 두개의 /(Slash)사이에 적게된다. /(Slash)는 delimiter로써 프로그래밍 언어에서 해당 패턴의 시작과 끝을 알린다. 또한 / 뒤에 정규 표현식 검색 옵션을 적을 수도 있다.

var expression = /abc/; //abc문자열을 뜻한다.
var expression = /at/; //at문자열을 뜻한다.

이에 더해서 몇가지 특수문자를 이용해 조금 더 복잡한 패턴 생성이 가능하다.

특수문자	의미
일반
\	1. 일반 문자 앞에 올 경우에는, \를 포함한 일반문자를 특수문자로 해석한다. 2. 특수 문자 앞에 올 경우에는, Escape Chracter 의 역할을 한다, 즉 /\\/은 일반문자 "\"를 표현하는 표현식이다.
^	문자열의 시작과 일치한다. 예) /^E/는 E로 시작하는 모든 문자열과 일치한다.
$	문자열의 끝과 일치한다. 예)/E$/는 E로 끝나는 모든 문자열과 일치한다.
*	* 선행 문자가 0번이상 반복된다. {0,}과 같은 의미를 가진다. /ab*/는 abbbbb, a, ab, 등과 일치하며, /ab*c/는 abbbbc, ac, abc, 등과 일치한다.
Quantifiers
+	+ 선행문자가 1번이상 반복된다. {1,}과 같은 의미를 가진다. /ab+/는 abbbbb, ab 등과 일치하나, a와는 일치하지 않는다. /ab+c/는 abbbc, abc등과 일치하나 ac와는 일치하지 않는다.
?	1. 선행 문자가 0번 또는 1번 존재한다. {0,1}과 같은 의미를 가진다 2. 수량자(Quantifier, *, +, ?,{})의 뒤에 올때는 선행 수량자의 최소값만큼 일치한다. 예) /a{1,4}/ 패턴을 "aaaa"라는 문구에 사용시, "aaaa" 전체와 일치하나, /a{1,4}?/ 패턴을 사용시에는 제일 앞의 a 한글자에만 일치한다
{n}	선행 문자가 양의 정수 n 회만큼 발생한다
{n,m}	선행 문자가 최소 n회, 최대 m회만큼 발생한다. m이 비게되면 무한을 뜻한다, {n,}은 최소 n회이상을 의미
Group Constructors
(x)	하위 패턴을 생성하며 \1, \2 와 같이 \숫자 문구를 이용해서 패턴을 재사용 가능하다. 예) 표현식 \([1-9]{3,}?)\-\1\-\1\ 은 \([1-9]{3,}?)\-([1-9]{3,}?)\-([1-9]{3,}?)\와 같다. 표현식 \(foo) (bar) \1 \1 \2\ 은 \(foo) (bar) \(foo) \(foo) \(bar)\와 같다.
(?:x)	(x)와 같이 하위패턴을 생성하나, 패턴 재사용이 불가능하다.
x(?=y)	x의 뒤에 y가 올때만 x와 일치한다.
x(?!y)	x의 뒤에 y가 오지 않을 때만 x와 일치한다.
(x|y)	x 또는 y와 일치한다.
Character Set
[xyz]	문자 세트를 생성한다. -(hypen)을 이용해서 범위를 정할 수도 있다. /[abcdefg]/ 는 /[a-g]/와 같으며 a,b,c,d,e,f,g 한 글자와 일치 한다.
[^xyz]	문자 세트를 생성한다. 단, 해당 문자가 포함되지 않을 때 일치한다. /[a-g]/는 a,b,c,d,e,f,g가 아닌 다른 문자 1개와 일치한다.
[x-z]	[xyz]와 같은 표현
[^x-z]	[^xyz]와 같은 표현
[x-zX-A]	x-z범위 사이, 또는 X-A범위 사이의 모든 문자와 일치한다
Meta Character
[\b]	Backspace와 일치한다.  \b와는 다른 의미를 가지니 조심할것.
.	모든 문자와 일치한다.
\b	Word Boundary(단어간의 경계)를 의미한다,  단어간의 경계는 길이가 0 이므로 \b는 언제나 다른 문자와 함께 사용된다. 예) /\bace/ 는 "acehigh"의 ace와 일치하며 /high\b/는 "acehigh"의 high와 일치한다. 단, /eh\b/나 /\beh/는 "acehigh"와 부분적으로 전혀 일치하지 않으며,  이는 "eh"문구가 단어내부에 포함되어 있기 때문이다
\B	\b와는 반대로 non-word boundary를 의미한다, 위의 "acehigh"에서 "/\Beh\B/를 사용했을 때 "eh"와 일치하며, 이는 "eh" 앞뒤로 단어가 이어지기 때문이다.
\cX	제어문자와 일치한다.
\d	0-9 사이의 숫자와 일치한다.
\D	0-9 사이의 숫자와 일차하지 않는 모든 문자와 일치한다. [^0-9]와 같다.
\f	form feed와 일치한다.
\n	line feed와 일치한다.
\r	carriage return와 일치한다.
\t	tab(탭)과 일치한다.
\v	Vertical Tab(수직 탭)과 일치한다.
\s	space, form feed, line feed, carriage return, tab등의 공간 문자와 일치한다.
\S	space, form feed, line feed, carriage return, tab, vertical tab등의  공간 문자를 제외한 모든 문자와 일치한다.
\w	"_"(underscore)을 포함한 모든 숫자 + 알파벳 문자와 일치한다. /[A-Za-z0-9_]/와 같다.
\W	\w와 일치하지 않는 모든 문자와 일치한다.
\숫자	()로 생성되는 하위패턴을 재사용 가능하다.
\0	Null 문자와 일치한다.
\xhh	2자리 16진수 코드 hh를 가진 문자와 일치한다.
\uhhhh	4자리 16진수 코드 hhhh를 가진 문자와 일치한다.

또한 RegExp 패턴 검색 옵션을 정하는 총 3개의 flag가 있다

g : Global Search, 패턴 검색이 처음 일치하는 스트링에서 멈추는 것이 아니라 전체 텍스트에 적용된다.
i : ignore case, 대소문자 관계없이 검색된다
m: multiline mode, 한 줄이 끝나고 다음 줄까지도 검색이 이어진다다다

RegExp 객체 생성하기

RegExp 객체는 2가지 방법으로 생성이 가능하다.

Regular Expression Literal

var expression = /abc/g;
// "/"는 delimiter며 "/"사이에 패턴이 들어가고 그 후에 flag 표시를 하게된다.
// /abc/g는 전체 텍스트에서 "abc" 문자열을 일치한다.

RegExp Constructor

var rep1 = new RegExp('abc', 'g');
var rep2 = new RegExp(/abc/, 'gmi');
// 첫번째 파라미터로 패턴이 들어가며, 두번째 파라미터로 flag가 들어가게 된다
// 단 첫번째 경우처럼 '(single quote)로 패턴 문자열을 구성할 경우에, \(backslash)는 \\로 표현된다.
// 즉 /\d+/ 라는 패턴은 '\\d+'로 적어야 한다.

각각의 RegExp 객체는 총 6가지 프로퍼티를 가지고 있다.

• global : 표현식이 g flag를 가졌는지를 가리키는 Boolean 값
• ignoreCase : 표현식이 i flag를 가졌는지를 가리키는 Boolean 값
• lastIndex : 다음 매칭이 시작될 문자의 위치를 가리키는 Integer 값, 기본값은 언제나 0이다.
• multiline : 표현식이 m flag를 가졌는지를 가리키는 Boolean 값
• source : Regexp에 사용된 정규 표현식, 표현식의 delimiter(/) 내부 패턴

var rep = new RegExp('foo.+', 'gi');
 
console.log(rep.global); //true
console.log(rep.ignoreCase); //true
console.log(rep.lastIndex); //0
console.log(rep.multiline); //false
console.log(rep.source); //foo.+

Regexp.prototype.exec()

exec()메소드는 파라미터로 주어진 문자열을 검색해 해당 표현식에 일치하는 결과값을 Array 형식으로 반환한다.

Parameter : 검색을 실행할 문자열(String)

Return : 표현식과 일치하는 문자열이 존재할 떄 Array형식으로 결과값을 반환하며, 해당 RegExp 인스턴스의 프로퍼티를 업데이트 한다.
반환되는 Array의 첫번째 인덱스에 해당 표현식과 일치하는 문자열이 저장되며, 그 후로 각각의 인덱스에 표현식에서 생성한 하위패턴['(',')'를 이용하는것]에 일치하는 문자열들이 순차적으로 저장되게 된다
표현식과 일치하는 문자열이 존재하지 않는다면, null 값을 반환한다.

var reg = /(java).*(\d{3}).*(fun)/gi
 
var str = "My JavaSrcipt101 class is fun. Good Class";
 
var result = reg.exec(str);
console.log(result);
 
//  reg.exec(str)메소드 실행 후 반환되는 Array 값
//
//  result[0] : 'JavaSrcipt101 class is fun',
//  result[1] : 'Java',
//  result[2] : '101',
//  result[3] : 'fun',
//  result["index"] : 3,
//  result["input"] : 'My JavaSrcipt101 class is fun. Good Class'

반환되는 Array 객체 정보

배열 인덱스(Array Index)	저장되는 값	예제
[0]	표현식에 일치하는 문자열	JavaSrcipt101 class is fun'
[1], [2], [3]....[n]	각각의 하위 패턴에 일치하는 문자열	[1] : 'Java' [2] : '101' [3] : 'fun'
배열 객체 프로퍼티(Property)	저장되는 값	예제
"index"	검색이 실행된 문자열에서  첫번째로 표현식이 일치하는 문자의 위치(최소 0에서 시작한다)	3
"input"	검색이 실행된 문자열	My JavaSrcipt101 class is fun.'

위의 형식에 일치하는 배열(Array)이 반환되며 exec() 메소드를 실행한 Regex 인스턴스는 아래와 같이 업데이트 된다.

Regex 인스턴스의 프로퍼티(Property)	저장되는 값	예제
lastIndex	다음 검색을 실행할 문자열의 인덱스 일치하는 문자열의 마지막 문자의 인덱스 + 1이 된다. 만약 g 플래그를 사용하지 않는다면 언제나 0이 된다.	29 "fun" 뒤에오는  마침표 문자 (.) 의 인덱스
ignoreCase	i 플래그의 사용여부	true
global	g 플래그의 사용여부	true
multiline	m 플래그의 사용여부	false
source	검색에 사용한 표현식	(java).*(\d{3}).*(fun)

RegExp.prototype.test()

test() 메소드는 파라미터로 주어진 문자열에 표현식에 일치하는 문자열이 존재하는지를 확인한 후 그 결과값을 true 또는 false의 Boolean 값으로 반환한다.

Parameter : 검색을 실행할 문자열(String)

Return : 표현식과 일치하는 문자열이 존재할때는 true 값을 반환하며, 아닐시는 false 값을 반환한다

var reg = /[A-Za-z]/;
 
var str = "My JavaSrcipt101 class is fun. Good Class";
 
var resultStr = reg.test(str);
 
console.log(resultStr); //true
 
var num = "4132";
 
var resultNum = reg.test(num);
 
console.log(resultNum); //false

자주쓰는 정규 표현식 몇가지

숫자만 체크 정규식 = 

/^[0-9]+$/;

이메일 체크 정규식 = 

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

일반전화 정규식 = 

/^\d{2,3}-\d{3,4}-\d{4}$/;

핸드폰 번호 정규식 =

/^\d{3}-\d{3,4}-\d{4}$/;

출처 : https://muckycode.blogspot.com/2015/05/javascript-regular-expression-regexp.html