[자바스크립트] 정규식(Regular Expressions)

 

 

정규식(Regular Expressions)

---

 

정규식은 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴입니다. 코드를 간략하게 만들 수 있으나, 가독성이 떨어질 수 있습니다.

RegExp의 exec, test 메소드와 String의 match, replace, search, split 메소드와 함께 사용됩니다.

 

 

1. 정규식

두가지 방법으로 정규식을 만들 수 있습니다.

 

정규식 패턴이 계속 지속될 경우

var re = /ab+c/;

정규식이 계속 지속 될 경우 위와 같은 리터럴 방법을 사용하는 것이 좋습니다.

 

 

정규식 패턴이 변경되는 경우

var re = new RegExp("ab+c");

정규식 패턴이 바뀌는 경우, 생성자 함수를 사용하여 동적으로 정규식을 만들 수 있습니다.

 

 

2. 정규식 패턴 만들기

정규식 패턴은 /abc/와 같이 단순한 문자열로 만들 수 있습니다. 또한 /ab*c/ 또는 /(\d+)\.=d%/ 와 같이 특수 문자와 단순 문자열의 조합으로 정규식 패턴을 만들 수 있습니다.

 

단순 문자열 패턴

단순 문자열 패턴은 직접 찾고자 하는 문자들로 구성됩니다.

예를 들어, /abc/는 this is abc의 abc에 매칭됩니다.

/abc/.exec("this is abc");

단순 문자열 패턴

 

하지만 /abc/는 this is ab c에 매칭 되지 않습니다.

/abc/.exec("this is ab c");

단순 문자열 패턴

 

 

특수문자를 사용한 패턴

하나 이상의 b를 찾거나, 단순 문자열 패턴보다 다양한 문자열을 찾기 위해 사용됩니다.

예를 들어, /ab*c/ 패턴은 'a' 뒤에 0개 이상의 'b'와 바로 뒤에 'c'가 있는 문자열을 찾습니다. /ab*c/는 abbbbbbbbbce에서 abbbbbbbbbc와 매칭됩니다.

/ab*c/.exec("this is abbbbbbbbbce");

특수 문자를 사용한 패턴

 

 

정규식에서의 특수문자

문자	의미
\	1. 단순문자 앞에 \ 단순문자 앞에 \는 앞에 있는 단순문자를 단순문자로 해석되지 않고, 다른 의미로 해석되어집니다.   /a\d/는 단순 ad와 매칭되지 않습니다. \d는 새로운 의미를 가지게 됩니다. (\d는 0부터 9까지의 숫자와 매칭됩니다.) console.log(/a\d/.exec("ad")); // 매칭되지 않음 console.log(/a\d/.exec("a1d")); // a1과 매칭됨 단순문자 앞에 \   2. 특수문자 앞에 \ 특수문자 앞에 \는 앞에 있는 특수문자를 단순문자로 해석합니다.   /a\*/는 aaaaaaa와 매칭되지 않습니다. \*은 단순문자 *로 해석됩니다. (특수문자 *은 앞 문자가 0개 이상일 경우 매칭됩니다.) console.log(/a\*/.exec("aaaaaaa")); // 매칭되지 않음 console.log(/a\*/.exec("a*aaaaaa")); // a*과 매칭됨 특수문자 앞에 \
^	입력의 시작 문자열에 매칭됩니다. Multi-line 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음 문자에도 매칭됩니다.   /^A/는 "an A"와 매칭되지 않습니다. 하지만 "An E"와는 첫번째 'A'와 매칭됩니다. console.log(/^A/.exec("an A")); // 매칭되지 않음 console.log(/^A/.exec("An E")); // 첫번째 'A'와 매칭됨 특수문자 ^ 패턴   ^는 문자셋([abc]) 패턴의 첫글자로 쓰인다면, 다른 의미를 가집니다. ([^abc]는 위에 언급한 내용되 다른 의미를 가짐)
$	입력의 끝 문자열에 매칭됩니다. Multi-line 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 전 문자에도 매칭됩니다.   /$t/는 eater에 매칭되지 않지만, eat의 마지막 문자 t에 매칭됩니다. console.log(/t$/.exec("eater")); // 매칭되지 않음 console.log(/t$/.exec("eat")); // 마지막 문자 't'와 매칭됨 특수문자 $ 패턴
*	0번 이상 반복되는 문자열에 매칭됩니다. {0, }와 동일합니다.   /bo*/은 "A ghost booooed"의 "boooo"과 매칭됩니다. /bo*/은 "A bird warbled"의 'b'에 매칭됩니다. 하지만, /bo*/은 "A goat grunted"와는 매칭되지 않습니다. console.log(/bo*/.exec("A ghost booooed")); // boooo와 매칭됨 console.log(/bo*/.exec("A bird warbled")); // b와 매칭됨 console.log(/bo*/.exec("A goat grunted")); // 매칭되지 않음 특수문자 * 패턴   /o*/은 "abcd"와 동일한 문자를 가지고 있지 않습니다. 하지만, 특수문자 *의 의미는 0번 이상 반복되는 문자열에 매칭되기 때문에, 동일한 문자가 없더라도 매칭되는 결과를 확인 할 수 있습니다. console.log(/o*/.exec("abcd")); 특수문자 * 패턴
+	1번 이상 반복되는 문자열에 매칭됩니다. {1, }과 동일합니다.   /a+/는 "candy"의 'a'에 매칭됩니다. /a+/는 "caaaaaaandy"의 "aaaaaaa"와 매칭됩니다. 하지만, /a+/는 "cndy"와는 매칭되지 않습니다. console.log(/a+/.exec("candy")); // a와 매칭됨 console.log(/a+/.exec("caaaaaaandy")); // aaaaaaa와 매칭됨 console.log(/a+/.exec("cndy")); // 매칭되지 않음 특수문자 + 패턴
?	0~1번 반복되는 문자열에 매칭됩니다. {0, 1}과 동일합니다.   /e?le?/은 'e'가 0~1번 반복 후, 'l'이 온후 'e'가 0~번 반복된 문자열을 찾습니다. /e?le?/은 "angel"의 "el"에 매칭됩니다. /e?le?/은 "oslo"의 'l'에 매칭됩니다. console.log(/e?le?/.exec("angel")); // el에 매칭됨 console.log(/e?le?/.exec("oslo")); // l에 매칭됨 특수문자 ? 패턴   *, +, ?, {} 패턴은 가능 한 많은 문자열을 매칭시킵니다. *, +, ?, {} 패턴 뒤에 ? 패턴을 사용하면, 가능한 가장 적은 문자열을 매칭시킵니다. /\d+/는 "123abc"에 "123"과  매칭됩니다. 하지만, /\d+?/의 경우는 "123abc"에 '1'과만 매칭됩니다. console.log(/\d+/.exec("123abc")); // 123과 매칭됨 console.log(/\d+?/.exec("123abc")); // 1과 매칭됨 *, +, ?, {} 패턴 뒤에 ? 패턴을 사용   x(?=y)와 x(!?y)와 같이 검증에서도 사용됩니다.
.	다음 줄 문자(개행 문자)를 제외한 문자열에 매칭됩니다.   /.n/은 "an apple"에 "an"에 매칭됩니다. 하지만 /.n/은 "nay"와는 매칭되지 않습니다. console.log(/.n/.exec("an apple")); // an에 매칭됨 console.log(/.n/.exec("nay")); // 매칭되지 않음 특수문자 . 패턴
(x)	'x'에 일치하고 일치한 것을 기억합니다. 괄호는 포획 괄호(capturing parentheses)라고 합니다.   /(foo) (bar)/은 "foo bar test"의 "foo bar"에 매칭됩니다. 또한 () 패턴으로 매칭된 값이 기억되는 것을 확인 할 수 있습니다. console.log(/(foo) (bar)/.exec("foo bar test")); // foo bar에 매칭되며, foo와 bar가 기억됩니다. 특수문자 () 패턴
(?:x)	'x'에 일치하지만 일치한 것을 기억하지 않습니다. 괄호는 비포획 괄호(non-capturing parentheses)라고 합니다.   /abc+/는 "abcabcabc"에 "abc"가 매칭됩니다. ('ab' 뒤에 오는 'c'의 1번 이상 반복되는 문자열을 매칭합니다.) abc가 반복되는 것을 매칭하고 싶을 때 (?:x) 패턴을 사용할 수 있습니다. /(?:abc)+/는 "abcabcabc"에 "abcabcabc"가 매칭됩니다. (abc 전체를 + 패턴으로 매칭하게 됩니다.) console.log(/abc+/.exec("abcabcabc")); // 첫번째 abc에 매칭됨 console.log(/(?:abc)+/.exec("abcabcabc")); // abcabcabc에 매칭됨 특수문자 (?:x) 패턴
x(?=y)	'y'가 뒤따라오는 'x'에만 매칭됩니다. lookahead라고 불립니다.   /foo(?=bar)/는 "foobar"의 "foo"에 매칭됩니다. /foo(?=bar|test)/는 "footest"의 "foo"에 매칭됩니다. (foo이 뒤따라오는 문자열이 bar 또는 test 일 경우 매칭됩니다.) console.log(/foo(?=bar)/.exec("foobar")); // foo에 매칭됨 console.log(/foo(?=bar|test)/.exec("footest")); // foo에 매칭됨 특수문자 x(?=y) 패턴
x(?!y)	'y'가 뒤따라 오지 않는 'x'에만 매칭됩니다. negated lookahead라고 불립니다.   /\d+(?!\.)/는 "3.141"에 "141"과 매칭됩니다. (소수점이 뒤따라오지 않는 숫자와 매칭됩니다.) console.log(/\d+(?!\.)/.exec("3.141")); // 141에 매칭됨 특수문자 x(?!y) 패턴
x|y	'x' 또는 'y'에 일치합니다.   /green|red/는 "green apple"의 "green"에 매칭됩니다. /green|red/는 "red apple"의 "red"에 매칭됩니다. console.log(/green|red/.exec("green apple")); // green에 매칭됨 console.log(/green|red/.exec("red apple")); // red에 매칭됨 특수문자 x_y 패턴
{n}	앞 문자가 n번 나타날 경우 매칭됩니다. (n은 양의 정수)   /a{2}/는 "candy"에는 매칭되지 않습니다. /a{2}/는 "caandy"의 "aa"와 매칭됩니다. /a{2}/는 "caaandy"는 처음으로 오는 "aa"와 매칭됩니다. console.log(/a{2}/.exec("candy")); // 매칭되지 않음 console.log(/a{2}/.exec("caandy")); // aa와 매칭됨 console.log(/a{2}/.exec("caaandy")); // 처음으로 오는 aa와 매칭됨 특수문자 {n} 패턴
{n,m}	n ~ m번 반복되는 문자열과 매칭됩니다. (m, m은 양의 정수, n <= m)   /a{1, 3}/는 "cndy"에는 매칭되지 않습니다. /a{1, 3}/는 "caandy"의 "aa"와 매칭됩니다. /a{1, 3}/는 "caaaaaaandy"의 처음으로 오는 "aaa"에 매칭됩니다. console.log(/a{1,3}/.exec("cndy")); // 매칭되지 않음 console.log(/a{1,3}/.exec("caandy")); // aa와 매칭됨 console.log(/a{1,3}/.exec("caaaaaaandy")); // 처음으로 오는 aaa와 매칭됨 특수문자 {n,m} 패턴
[xyz]	문자셋(Character set)을 말합니다. 점(.), 별표(*)와 같은 특수 문자는 문자셋에서는 단순 문자로 인식됩니다. 하이픈(-)을 이용하여 문자의 범위를 지정 할 수 있습니다.   /[a-d]/는 "brisket"의 'b'와 매칭됩니다. /[a-z.]+/는 "test.i.ng"의 문자열 전체, "test.i.ng"과 매칭됩니다. console.log(/[a-d]/.exec("brisket")); // b와 매칭됨 console.log(/[a-z.]+/.exec("test.i.ng")); // test.i.ng와 매칭됨 특수문자 [xyz] 패턴
[^xyz]	음의 문자셋(negated character set) 또는 보수 문자셋(complemented character set)을 말합니다. [] 안에 있지 않은 문자열과 매칭됩니다. 문자셋과 동일하게 하이픈(-)을 이용하여 문자의 번위를 저정 할 수 있습니다.   /[^a-d]/는 "brisket"에서 처음으로 a부터 d까지의 문자에 포함되지 않는 'r'과 매칭됩니다. /[^a-d]/는 "chop"의 'h'와 매칭됩니다. console.log(/[^a-d]/.exec("brisket")); // r에 매칭됨 console.log(/[^a-d]/.exec("chop")); // h에 매칭됨 특수문자 [^xyz] 패턴
[\b]	백스페이스와 매칭됩니다. 백스페이스 문자에 일치 시키려면 대괄호([])를 이용해야 합니다.
\b	단어의 경계를 말합니다.   /\bm/은 "moon"의 m과 매칭됩니다. /oo\b/는 "moon"과 매칭되지 않습니다. (문자열의 끝이 o이 아니지 때문에) /n\b/는 "moon"의 n과 매칭됩니다. console.log(/\bm/.exec("moon")); // m과 매칭됨 console.log(/oo\b/.exec("moon")); // 매칭되지 않음 console.log(/n\b/.exec("moon")); // n과 매칭됨 특수문자 \b 패턴
\B	단어의 경계가 아닌 곳을 말합니다.   /\B../은 "noonday"의 "oo"와 매칭됩니다. console.log(/\B../.exec("noonday")); // oo와 매칭됨 특수문자 \B 패턴
\cX	X는 A에서 Z까지 문자중 하나입니다. 문자열에서 컬트롤 문자와 매칭됩니다.
\d	숫자 문자와 매칭됩니다.   /\d"/는 "a1b"의 '1'에 매칭됩니다. console.log(/\d/.exec("a1b")); // 1에 매칭됨 특수문자 \d 패턴
\D	숫자가 아닌 문자와 매칭됩니다. ([^0-9]와 동일)   /\D/는 "1a2"의 'a'에 매칭됩니다. console.log(/\D/.exec("1a2")); // a에 매칭됨 특수문자 \D 패턴
\f	폼피드(U+000C) 문자에 매칭됩니다.
\n	줄 바꿈(U+000A) 문자에 매칭됩니다.
\r	캐리지 리턴(U+000D) 문자에 매칭됩니다.
\s	스페이스, 탭, 폼피드, 불 바꿈 문자등을 포함한 하나의 공백 문자와 매칭됩니다. ([ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)   /\sbar/는 "foo bar"의 " bar"에 매칭됩니다. console.log(/\sbar/.exec("foo bar")) // ' bar'에 매칭됨 특수문자 \s 패턴
\S	공백이 아닌 하나의 문자와 매칭됩니다. ([^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)   /\S+/는 "foo bar"의 "foo"에 매칭됩니다. (가장 먼저 오는 공백아닌 문자열) console.log(/\S+/.exec("foo bar")); // foo에 매칭됨 특수문자 \S 패턴
\t	탭(U+0009) 문자에 매칭됩니다.
\v	수직 탭(U+000B) 문자에 매칭됩니다.
\w	밑줄 문자를 포함한 영어, 숫자 문자에 매칭됩니다. ([A-Za-z0-9_] 와 동일)   /\w+/는 "apple"에 문자열 전체, "apple"과 매칭됩니다. /\w+/는 "$5.28"에 '5'와 매칭됩니다. /\w+/는 "3D."에 "3D"와 매칭됩니다. console.log(/\w+/.exec("apple")); // apple과 매칭됨 console.log(/\w+/.exec("$5.28")); // 5와 매칭됨 console.log(/\w+/.exec("3D.")); // 3D와 매칭됨 특수문자 \w 패턴
\W	단어가 아닌 문자와 매칭됩니다. ([^A-Za-z0-9_] 와 동일)   /\W+/는 "3D."에 '.'과 매칭됩니다. console.log(/\W+/.exec("3D.")); // .과 매칭됩니다. 특수문자 \W 패턴
\n	정규식 안 n번 괄호의 최근 일치 부분의 역참조 입니다. (n은 양의 정수)   /(foo) (bar) \1 \2/은 "foo bar foo bar"에 "foo bar foo bar"이 매칭됩니다. (\n 패턴은 괄호로 기억된 값을 참조하고 있습니다.) \1은 첫번째 괄호로 매칭된 foo 값을 나타내고, \2는 두번째 괄호로 매칭된 bar를 나타냅니다. 즉 /(foo) (bar) \1 \2/ 패턴은 /(foo) (bar) foo bar/ 패턴과 동일합니다. console.log(/(foo) (bar) \1 \2/.exec("foo bar foo bar")); // foo bar foo bar과 매칭됨 특수문자 \n 패턴
\0	Null 문자와 매칭됩니다.
\xhh	코드가 hh(2개의 16진수)인 문자와 매칭됩니다.
\xhhhh	코드가 hhhh(4개의 16진수)인 문자와 매칭됩니다.

 

 

3. 정규식 사용하기

정규식은 ExgExp 메소드에 test, exec, String 메소드에 match, replace, search, split 메소드와 함께 사용됩니다.

 

ExgExp 메소드

Method	Description
exec	매칭된 문자열을 찾기 위한 메소드입니다. 매칭된 문자열이 있다면 매칭된 값의 배열을 리턴하고, 매칭된 문자열이 없다면 null을 리턴합니다.
test	매칭된 문자열이 있는지 확인하기 위한 메소드입니다. 매칭된 문자열이 있다면 ture를 리턴하고, 매칭된 문자열이 없다면 false를 리턴합니다.

 

매칭된 문자열이 있는지 확인하는 용도로 메소드를 사용한다면, exec 메소드는 느릴 수 있기 때문에 test 메소드를 사용하는 것이 좋습니다.

 

ExgExp 메소드로 아래와 같이 정규식을 사용할 수 있습니다.

var myArray = /d(b+)d/g.exec('cdbbdbsbz');

 

ExgExp 객체를 따로 저장하여, 정규식을 사용 할 수도 있습니다.

var myRe = /d(b+)d/g; // 또는, var myRe = new RegExp('d(b+)d', 'g');
var myArray = myRe.exec('cdbbdbsbz');

 

ExgExp 객체를 따로 저장하여 사용한다면, ExgExp 객체의 프로퍼티 사용이 가능해집니다.

위의 예제의 실행 결과와 myRe 객체, myArray 객체의 값은 아래와 같습니다.

 

myRe 객체, myArray 객체의 값

 

 

Object	Property or index	Description	In this example
myArray		매칭된 문자열과 기억된 부분 문자열	["abbd", "bb"]
	index	매칭된 문자열 인덱스 (0부터 시작)	1
	input	원래의 문자열	"cdbbdbsbz"
	[0]	매칭된 문자열	"abbd"
myRe	lastIndex	다음 매칭을 시작할 인덱스	5
	source	정규식 패턴	"d(b+)d"

 

 

 

String 메소드

 

Method	Description
match	매칭된 문자열을 찾기 위한 메소드입니다. 매칭된 문자열이 있다면 매칭된 값의 배열을 리턴하고, 매칭된 문자열이 없다면 null을 리턴합니다.
search	매칭된 문자열이 있는지 확인하기 위한 메소드입니다. 매칭된 문자열이 있다면 매칭된 문자열의 인덱스를 리턴하고, 매칭된 문자열이 없다면 -1를 리턴합니다.
replace	매칭된 문자열을 찾아 매칭된 문자열을 변경하는 메소드입니다.
split	매칭된 문자열을 찾아 그 문자열을 기준으로 문자열을 나누는 메소드입니다.

 

매칭된 문자열이 있는지 확인하는 용도로 메소드를 사용한다면, match 메소드는 느릴 수 있기 때문에 search 메소드를 사용하는 것이 좋습니다.

 

정규식의 () 패턴을 String 메소드의 replace등에 활용할 수 있습니다.

/a(b)c/는 "abc"와 매칭되고, 'b'를 기억합니다. 괄호와 매칭된 문자열을 불러오기 위해, 배열 [1], ..., [n]을 사용합니다.

var str = "abcde";
var myArray = str.match(/a(b)c(d)/);
console.log(myArray);

String 메소드의 () 정규식 패턴 사용하기

 

0번 배열에는 매칭된 값이 저장되기 때문에, 기억된 부분 문자열은 1번부터 시작됩니다.

 

다음 예는 replace 메소드를 이용한 예제입니다. 괄호에 일치하는 부분 문자열을 의미하는 $1(첫번째 괄호 값), $2(두번째 괄호 값)을 사용하였습니다.

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);

String 메소드의 () 정규식 패턴 사용하기

 

$1, $2를 사용하여, 두 문자열을 스와핑하는 예제입니다.

 

 

4. 정규식의 플래그

정규식의 플래그는 4가지가 있습니다.

 

Flag	Description
g	전역 검색
i	대소문자 구별 없이 검색
m	Multi-line 검색, 시작 혹은 끝 문자 탐색(^ and $)이 다중행에 적용되도록 합니다.
y	현재 위치에서 검색

 

정규식의 플래그 정의하기

다음과 같이 플래그를 사용하여 정규식을 만들 수 있습니다.

var re = /pattern/flasgs;
// 혹은
var re = new RegExp("pattern", "flags");

플래그는 정규식을 처음 정의 할 때, 설정해야 합니다. 그 이후의 플래그를 추가하거나 삭제할 수 없습니다.

 

 

정규식의 플래그 예제

g 플래그를 이용하여 전역 검색

var re = /\w+\s/g;
var str = 'fee fi fo fum';
var myArray = str.match(re);
console.log(myArray);

match에서 g 플래그

 

g 플래그를 이용하여 매칭되는 모든 문자열을 가져올 수 있습니다. 만약 g 플래그를 사용하지 않는다면 처음으로 매칭되는 값만을 가져오게 됩니다.

var re = /\w+\s/;
var str = 'fee fi fo fum';
var myArray = str.match(re);
console.log(myArray);

g 플래그 없이 매칭

 

g 플래그를 사용할 때, String의 match 메소드와, RegExp의 exce 메소드의 사용 방법은 다릅니다. exec 메소드를 사용할 경우, 아래와 같이 사용해야 모든 매칭된 문자열을 가져올 수 있습니다.

var re = /\w+\s/g;
var xArray;
while(xArray = re.exec(str))
    console.log(xArray);

exec에서 g 플래그

 

i 플래그를 이용하여 대소문자 구별없이 검색

var re = /Fee/gi;
var str = 'fee fi fo fum';
var myArray = str.match(re);
console.log(myArray);

i 플래그

 

m 플래그를 이용하여 다중행 시작/끝 문자 검색

var re = /^t/m;
var str = 'fee fi fo fum \ntest';
var myArray = str.match(re);
console.log(myArray);

m 플래그

 

y 플래그를 이용하여 검색 위치 조정

var str = '#foo#';
var regex = /foo/y;

regex.lastIndex = 1;
console.log(regex.exec(str)); // foo와 매칭됨
regex.lastIndex = 5;
console.log(regex.exec(str)); // 매칭되지 않음
console.log(regex.lastIndex); // 0 (매칭되지 않을 경우 0으로 초기화)

y 플래그