javascript - 정규표현식 이란?

1. 정규 표현식이란?

정규표현식이란 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 검색, 치환, 등 의 작업을 간편하게처리 할 수 있도록 도와주는 수단입니다. (정규 표현식은 특정 언어에 종속되는 의미가 아닙니다.)

어디에 쓰일까 고민해보았을때, 많은 부분에서 사용이 가능하겠지만, 회원가입시, 이메일 형식을 파악할때에도 사용이 가능할 것 같습니다. 서버에서도 검증을 통해 처리가 가능하겠지만, 어차피 사용자가 잘못된 이메일을 입력하여 회원가입 불가능 처리를 하도록 할것이라면, 굳이 서버의 자원을 사용하기 보단 javascript에서 정규표현식을 통해 이메일 형식인지를 확인하도록하여 클라이언트의 자원을 이용하도록 할 수 있을것 같습니다.

 

 

2. 정규표현식 패턴

다음 링크로 이동하면 정규 표현식에대한 패턴들을 볼 수 있습니다.http://zvon.org/comp/r/tut-Regexp.html#Pages~Contents

 

정규 표현식 테스트

다음 링크로 이동하시면 정규 표현식에 대한 결과를 테스트 할 수 있습니다. https://regexr.com/

 

 

표현식 주의할 것

2.1 대소구분

Hello, world! 라는 소스에 대한 검색입니다. 첫번째 케이스는 표현식을 Hello로 지정하여 검색한 결과 Hello,에 매칭이 되어 하이라이트가 된것을 볼 수 있습니다. 두번째 케이스에서는 표현식을 hello(소문자)로 지정하여 검색한 결과 아무런 매칭이 없는 것을 볼 수 있습니다.

즉, 정규표현식은 대소문자를 구분합니다.

 

 

2.2 띄어쓰기 구분

같은 소스에 대한 검색입니다. 이번에는 띄어쓰기에 대한 정규표현식의 결과를 살펴보겠습니다. 자세히 봐야할 것은 Case2 입니다. 정규표현식으로 Hello, world를 검색했습니다. 즉, 실제 sources보다 더 많은 띄어쓰기를 하여 검색을 했습니다. 결과로는 아무런 매칭이 되지 않는 것을 볼 수 있습니다.

 

 

위치를 이용한 검색

2.3 ^(캐럿) 과 $

^(캐럿)을 정규표현식 앞에 입력한다면, 해당 표현식으로 시작하는 문자열을 찾아줍니다.

$를 정규표현식 뒤에 입력한다면, 해당 표현식으로 끝나는 문자열을 찾아줍니다.

 

 

^$ 를 같이사용한다면?

^과 $를 같이 사용한다면 어떻게 받아들일까요? $로 시작하는 문자열검색?, ^로 끝나는 문자열검색? 아닙니다.두 기호 모두 표현식에서는 특수한 의미로 해석이 됩니다. 따라서 Case1 에서는 아무런 매칭이 없는 것을 볼 수 있습니다.

 

그렇다면 어떻게 $로 시작하는 문자열을 표현식으로 검색할 수 있을까요? \를 사용하면 됩니다. \는 특수문자들을 글자 그대로 해석하도록 도와주는 기호입니다. Case2에서는 \$ 로 검색을 시도했습니다. 저것의 의미는 resources에서 $를 찾아달라는 의미입니다. 즉, 글자 그대로 해석이 되었습니다.

 

Case3를 보면 이제 궁금증이 해결될 것입니다. ^\$ 이렇게 검색을 했는데요, 즉 $를 문자열로 받아들이도록 한 뒤 ^(캐럿)을 이용하여 $로 시작하는 문자열들을 찾은 것 입니다.

 

 

와일드카드

2.4 .

.은 와일드카드처럼 사용가능한 특수 기호입니다. 즉, .을 이용한다면 어떤 문자열이건 다 찾아주게 됩니다. 또한 , .의 개수에 따라 검색이 가능합니다.

Case1에서는 .을 이용해 검색했으므로 모든 문자열을 찾아줍니다.

Case2에서는 . x 6(6개)를 이용했으므로 문자열을 6개씩 끊어서 찾아줍니다. 마지막 선택이 안된 부분은 6개씩 끊어 찾은 나머지 5개는 해당이 되지 않기 때문에 선택이 되지 않은 것입니다.

 

조금 더 자세히 살펴보기위해 더많은 케이스를 보겠습니다. O.K. 라는 sources에서 정규표현식을 통해 검색을 합니다.

 

Case1 에서는 정규표현식 .을 이용하여 검색합니다. 따라서 모든 문자열이 선택된것을 볼 수 있습니다.

Case2에서는 \.을 이용해 검색합니다. 즉 .을 문자열 그대로 받아 들이도록합니다.

Case3에서는 \ .. \ . 을 이용해 검색합니다. 이부분이 조금 헷갈릴 수 있습니다. 아래에서 더 자세히 설명드리겠습니다.

 

우선 \. 이 나온것을 볼 수 있습니다. 즉, .을 문자열 그대로 해석하라는 뜻입니다.

두번째로 .이 나왔습니다. 즉 아무 문자열이든 검색하라는 뜻입니다. 첫번째와 두번째를 합쳐서 생각한다면 .이라는 문자열로 시작하고 두번째로 아무 문자열이든 상관 없다는 의미입니다.

마지막으로 다시 \.이 나왔습니다. 즉 문자열 .을 검색하라는 뜻입니다. 모두 합쳐서 생각한다면 .으로 시작하고 2번째에는 아무런 문자열이 와도 상관없으며 마지막이 다시 .으로 끝나는 세글자를 검색하라는 의미입니다.

 

 

후보군 지정

정규표현식으로 검색할 문자열들을 후보군으로 묶어서 한번에 검색하려면, []를 이용하면 됩니다.

2.5 []

[]는 검색하기 위한 표현식들을 모두 묶어 검색하도록 하는 방법입니다.

Case1 에서는 [oyu]를 표현식으로하여 검색을 합니다. 즉, How do you do?라는 sources에서 []안에 담긴 o, y, u 를 검색한다는 의미입니다.

Case2에서는 [dH].을 표현식으로 하여 검색을 합니다. 즉, d로 시작하며 2번째 문자가 어떤 것이든 검색하고, H로 시작하며 2번째 문자가 어떤것이든 검색한다는 의미입니다. 따라서 Ho, do, do가 선택되었습니다.

Case3에서는 [owy][yow]를 표현식으로 하여 검색합니다. 즉, 각각의 []안에 담긴 문자열들을 조합해 만들수 있는 모든 문자열 oy, oo, ow, wy, wo, ww, yy, yo, yw를 검색한다는 의미입니다.

 

 

범위 검색

2.6 -

[]를 이용한다면 후보군을 통해 다양한 표현식을 이용해 검색하는 것이 편리합니다. 하지만 이러한 후보군을 모두 나열하기 귀찮을 수도 있습니다. 이때, -를 이용한다면 범위를 지정하여 후보군에 넣어 줄 수 있습니다.

Case1 의 경우 *대문자 C~K 까지 후보군에 넣어 검색한다는 의미입니다.

Case3의 경우 *소문자 a~d 까지 후보군에 넣어 검색한다는 의미입니다.

Case4의 경우 숫자 2~6까지 후보군에 넣어 검색한다는 의미입니다.

 

 

후보군 제외

2.7 [^]

후보군을 나타내는 []안에 ^(캐럿)을 사용한다면 []안에 존재하는 것들을 제외한 나머지를 검색하도록 합니다.

Case1을 보시면, [^CDghi45]를 표현식으로 하여 검색합니다. 이 의미는 C, D, g, h, i, 4, 5를 제외한 나머지 모두를 검색한다는 의미입니다.

 

 

서브 패턴(OR)

2.8 (|)

(|)는 OR의 의미로 사용할 수 있습니다. 바로 예제를 보겠습니다.

Case2의 경우 (on|ues|rida)를 표현식으로 검색을 했습니다. srouce에서 on 또는 ues 또는 rida에 해당하는 단어를 검색하라는 의미 입니다.

Case3의 경우 (Mon|Tues|Fri)day로 검색을 했습니다. 이 의미는 Monday, Tuesday, Friday로 검색을 하라는 의미 입니다.

 

 

수량자(Quantifiers)

2.9 *, +, ?

Case1에서는 a*b를 이용하여 검색을 했습니다. *의 의미는 *앞에 오는 문자가 0~n 개가 온다는 의미입니다. 즉, 합쳐서 해석하자면 b, ab, aab, aaab처럼 a의 개수와 상관없이 뒤에 b가 오는 문자를 검색한다는 의미입니다.

Case2에서는 a+b를 이용해 검색을 했습니다. +의 의미는 +앞에 오는 문자가 1~n개가 온다는 의미입니다. *와의 차이점은 +앞에오는 문자는 무조건 1개이상 와야한다는 점입니다. 즉, ab, aab, aaab ...는 가능하지만 b는 불가능 합니다.

Case3에서는 a?b를 이용해 검색을 했습니다. ?의 의미는 ?앞에 오는 문자가0 또는 1개 여야 한다는 의미입니다. 즉, ab 또는 b에 해당하는 경우만을 검색합니다.

 

이번에는 다른 특수기호와 함께 사용했을때의 예제들을 살펴보겠습니다. 이번 경우들이 조금 헷갈릴 수 있습니다.

Case1의 경우에는 .*입니다. .은 어떤 문자열이든 상관없다고 했습니다. *는 0~n개를 의미 했습니다. 따라서 전체 문자열을 검색하는 방법입니다.

Case2의 경우에는 -A*-입니다. 즉 -로 시작하며 중간에 A가 0~n개오고 다시 -로 끝나는 문자열을 검색합니다. 따라서 --가 검색이 됩니다. (A가 0개여도 되므로)

Case3의 경우는 [-@]*입니다. 여기서 잘 생각하셔야 하는 것이 이 표현식의 의미는 - 와 @를 조합한 어떤 것이든 검색을 한다는 것 입니다. 그 때문에 -@-가 검색이 되는 것을 볼 수 있습니다.

 

이 표현식은 [^공백]+ 입니다. 즉 공백이 없는, 1개이상의 문자열을 모두 포함한다는 의미로 공백을 제외한 모든 문자열이 선택됩니다.

 

 

2.10 {}

이번에는 직접 개수를 지정할 수 있는 수량자 입니다. {숫자}를 사용하면 됩니다.

Case1의 경우 .{5}를 표현식으로 사용했습니다. 의미는 어떠한 문자열이건 5글자인 경우를 검색하라는 의미입니다.

Case2의 경우 [els]{1,3}입니다. 이 의미는 후보군에 해당하는 글자의 조합이 1글자 이상 3글자 이하인 경우를 검색하라는 의미입니다.

Case3의 경우 [a-z]{3,}을 표현식으로 사용했습니다. 즉 알파벳 a~z를 후보군으로 하여 이들의 조합으로 3글자 이상인 경우를 모두 검색한다는 의미입니다.

 

앞서서 살펴본 첫번째 수량자의 경우 {}를 이용하여 표현이 가능합니다. 위의 예제를 보시면 충분히 이해하실수 있을겁니다.

 

 

문자 선택

2.11 \w

한 글자 문자를 선택하는 방법은 앞에서 이미 여러개를 보았습니다.

첫번째는 후보군을 이용하는 방법 : [A-z0-9_]

두번째는 후보군과 ^을 이용하는 방법입니다. : [^ ]

두번째 방법은 공백을 제외한 모든 문자를 포함하기 때문에 문자라고 하기에는 애매할 수 있겠네요..

 

하지만 위의 방법들보다 확실하고 간편한 방법이 있습니다. 바로 \w(소문자)를 이용하는 방법입니다. 이렇게 한다면 공백과 특수문자를 제외한 모든 문자를 선택해줍니다.

 

문자 아닌것 선택

2.12 \W

이번에는 문자가 아닌것을 선택하는 방법을 알아보겠습니다. 문자가 아닌 것을 선택하는 방법은 위와 같이 [^A-z0-9_]가 있지만 이보다 더 쉬운 방법이 있습니다. 바로 \W(대문자)입니다.

 

 

공백 선택

2.13 \s

공백을 선택하는 방법은 \s(소문자)를 이용하면 됩니다. [0-9]와 같은 의미 입니다.

 

공백 아닌것 선택

2.14 \S

반대로 공백이 아닌것을 선택하기 위해서는 \S(대문자)를 이용하면 됩니다.

 

 

숫자 선택

2.15 \d

 

숫자 아닌것 선택

2.16 \D

 

 

단어 선택

2.17 \b\w+\b

\b\w의 경우 한글자의 문자로 시작하는 것을 선택해줍니다. \w\b의 경우는 한글자 문자로 끝나는 것을 선택해줍니다. 이것을 이용하여 중간에 \w+를 넣게되면 단어를 선택할 수 있습니다.