본문 바로가기
Essays

[정규표현식] regex란? 이메일,전화번호 찾기, javascript 활용예제

by VincentKim 2023. 3. 19.

개발을 하다 보면 여기저기서 마주하게 되는 정규표현식이라는 것이 있다. 매번 나중에 공부해야지 하며 누가 만들어둔 정규표현식을 복붙하면서 쓰다가 정리를 한번 해두고 가면 좋을 것 같아서 정리를 해보게 되었다. 

 

정규표현식 regex

Reguler Expression의 약자로 1950년 미국의 수학자 Stephen에 의해 개발되어 유닉스 계열에서 텍스트와 같은 것들을 처리하고 프로세싱하는데 쓰이다가 이제는 Java, Python, Javascript등의 다양한 프로그래밍 언어에서 내부적으로 지원하고 있을 뿐 아니라 텍스트나 코드 에디터에서도 정규 표현식을 이용해서 전화번호 형태의 패턴을 찾거나 웹사이트 형태의 패턴을 찾을 수 있으며 사용자가 입력한 데이터가 이메일이나 패스워드와 같은 특정한 패턴에 부합하는지 유효성 검사를 하는 데 사용된다. 

 

 

정규표현식의 구조

https://poiemaweb.com/js-regexp

정규표현식은 slashes, pattern, flag 세 부분으로 이루어 진다.  

 

Slashes

패턴의 시작과 끝을 나타낸다.

 

Pattern

패턴에는 검색하고 싶은 문자열을 지정한다. 이때 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지도 검색한다. 또한 패턴은 특별한 의미를 가지는 메타문자(Metacharacter) 또는 기호로 표현할 수 있다.

 

flag

플래그는 아래와 같은 종류가 있다.

 

FlagMeaningDescription

i Ignore Case 대소문자를 구별하지 않고 검색한다.
g Global 문자열 내의 모든 패턴을 검색한다.
m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.

플래그는 옵션이므로 선택적으로 사용한다. 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 매칭한 대상만을 검색하고 종료한다. 

 

문법 정리 

Groups and ranges

| 또는
() 그룹
[] 문자셋, 괄호안의 어떤 문자든
[^] 부정 문자셋, 괄호안의 어떤 문가 아닐때
(?:) 찾지만 기억하지는 않음

Quantifiers

? 없거나 있거나 (zero or one)
* 없거나 있거나 많거나 (zero or more)
+ 하나 또는 많이 (one or more)
{n} n번 반복
{min,} 최소
{min,max} 최소, 그리고 최대

Boundary-type

\b 단어 경계
\B 단어 경계가 아님
^ 문장의 시작
$ 문장의 끝

Character classes

\ 특수 문자가 아닌 문자
. 어떤 글자 (줄바꿈 문자 제외)
\d digit 숫자
\D digit 숫자 아님
\w word 문자
\W word 문자 아님
\s space 공백
\S space 공백 아님

 

예제를 통해 확인해보기 

연습하기 좋은 사이트 소개

예제를 통해 학습하기 전에 연습하기 좋은 사이트를 소개한다.

https://regexr.com/ 

 

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

예제를 설정하고, 정규표현식을 작성하면 찾은 부분에 하이라이트가 된다. 우측 하단에 explain 탭을 통해 자세한 설명을 볼 수 있다. 

 

 

 

전화번호 찾기 

숫자의 최소, 최대 갯수를 지정해 주고 구분로 들어올 수 있는 옵션을 넣어주었다. 

 

 

이메일 찾기 

이메일을 찾기 위해 구분자 "@", "." 좌우로 들어올 수 있는 문자열을 지정해 주고 "+"를 사용하여 하나 또는 많은 문자가 들어올 수 있음을 설정해주었다. 

 

 

url주소 뒤의 id를 가져오기

유튜브 url을 보면 youtu.be/ 뒤에 11자리의 id가 있다. 이 id를 가져와보자. 

http와 https 두가지 모두 될 수 있으니 s는 있을 수도 있고 없을 수도 있다.

마찬가지로 있을수도 없을 수도 optional 한 그룹에도 "?"를 붙여준다. 

"." 이나 "/" 등의 특수문자의 경우는  "\"(escape)를 앞에 붙여주어야 한다. 

id가 11글자이므로 들어올 수 있는 문자열을 지정해 주고 문자의 갯수를 설정해 준다. 

그룹으로 설정하지 않아도 되는 부분에는 중괄호 시작부분에 "?:"를 넣어주면 그룹으로 캡쳐되지 않는다. 

 

 

자바스크립트에서의 활용 예제 

isVideoFile()은 파일 이름을 받아와서 reaExp에서 설정한 정규표현식에 해당하는지를 검사하여 bolllean을 리턴한다. 

match()에서는 는 매칭되는 문자열과 매칭되는 그룹에 해당하는 데이터가 들어있는 배열이 리턴되고, 해당 배열로 접근하여 데이터에 접근할 수 있다. 위 예제에서는 해당 데이터의 유무에 따라 불리언을 리턴해주는 방식으로 처리를 해 주었다. 

 

 

참고

https://www.youtube.com/watch?v=t3M6toIflyQ&t=405s 

https://regexr.com/5mhou  

https://github.com/dream-ellie/regex

댓글