정규표현식 공부하기

STUDY WITH ME!

이상한 부호의 집합체. 필요한 게 있으면 구글에서 검색해서 긁어다 사용하곤 했다. 하지만 내가 사용하기에 딱 맞는 자료는 나오지 않고, 변형해서 사용하려니 머리가 아프다. 보는 것처럼 어렵기만 하진 않은 정규식. 같이 공부해보자!!

---

정규표현식이란?

---

정의

문자열에서 찾을 수 있는 일정한 패턴을 기호화한 표현식

12345

여기 문자열 12345가 있다.
이를 '12345'로 할 수도 있고, '숫자 5개가 연속해서 나오는 문자열'이라고 나름의 패턴을 찾아 묘사해서 말할 수도 있다. 이 패턴을 간략하게 \d{5} 기호로 표현하기로 약속한 걸 정규표현식이라고 한다.

 

어떤 상황에 사용할까?

다양한 곳에 사용할 수 있겠지만, 전화번호나 이메일처럼 텍스트에 일정한 형식이 정해져 있는 요소를 처리하는데 많이 사용한다.
예를 들어 내가 가장 처음 정규식 사용한 것은 바로 금액에 콤마 찍기였다. 인풋 박스에 사용자가 금액을 입력하면 정규식을 이용해 처리하여 3개의 연속된 숫자 뒤에 콤마,를 찍어 화면상에 출력했다.

사용자 입력 값 : 12345
출력 값 : 12,345

 

유래

1950 stephen Cole Kleene에 의해 유닉스 등에서 자주 사용 하던 것이 다른 많은 개발 언어에도 도입됨.

---

정규식 기초 문법

---

인터넷에 떠돌아다니는 문법들을 가져다가 사용할 때 이게 무슨 말인지 이해하고 사용할 수 있도록 정리해보자!

아래의 기초 문법 정리 내용은 유튜브 드림코딩 엘리 채널의 정규표현식 강의의 영상의 필기노트이다. 기초 문법이 잘 정리가 되어 있으니 영상으로 같이 보고 싶다면 아래의 링크 클릭

 

https://youtu.be/t3M6toIflyQ

정규표현식 , 더이상 미루지 말자 🤩

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

GitHub - dream-ellie/regex

---

기초 문법 정리

정규 표현식 시작

/ 로 시작하고 패턴과 플래그로 이루어져 있다.

/regex?/i
/pattern/flag

 

Groups and Ranges

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

/gr(?:e|a)y/

물음표를 넣었을 때에는 그룹이 지정되지 않음.(논 캡쳐링 그룹)
찾지만 기억하지 않을 때라는 표현이 좀 낯설지만 아래서 다시 설명

/gr(a|e|d)y/
/gr[aed]y/

동일

/[abcdef]/
/[a-f]/

동일

/[a-zA-Z0-9]/
위에 나열한 문자만

/[^a-zA-Z0-9]/
위에 나열한 문자를 제외하고

논캡쳐링그룹은 원하는 식을 찾는 조건으로 사용하지만 그 값을 직접 사용하지 않는다. 아래에서 예제랑 다시 설명

 

Quantifiers

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

/gray/ -> gray

/gra?y/ -> gray, gry
? : a가 있거나 없는 경우 모두

/gra*y/ -> gray, gry, graay···
* : a가 있거나 없거나 많거나

/gra+y/ -> gray, graay···
+ : a가 하나 있거나 많거나

/gra{2}y/ -> graay
{2} : a가 2개

/gra{2,}y/ -> graay, graaay···
{2,3} : a가 최소 2개 이상

/gra{2,3}y/ -> graay, graaay
{2,3} : a가 최소 2개 최대 3개

 

Boundary-type

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

/\bYa/ -> Ya
\b : 단어 앞에서 쓰이는 Ya(띄어쓰기 다음, 줄바꿈 다음)

/Ya\b/ -> Ya
\b : 단어 뒤에서 쓰이는 Ya(띄어쓰기 앞, 줄바꿈 앞)

/\BYa/ -> Ya
\B : 단어 앞에서 쓰이지 않는 Ya(단어 중간, 단어 뒤)

/Ya\B/ -> Ya
\B : 단어 뒤에서 쓰이지 않는 Ya(단어 앞, 단어 중간)

/^Ya/ -> Ya123123
^ : 문장 앞에서 시작하는 Ya (줄바꿈 뒤)

/Ya$/ -> 123123Ya
$ : 문장의 뒤에 오는 Ya (줄바꿈 앞)

* flag 설정을 m(multi line)으로 하지 않으면 텍스트 전체의 시작과 끝을 의미함

 

Character classes

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

---

간단한 실습

전화번호

\d{2,3}[- .]\d{3}[- .]\d{4}/g

->
010-898-0893
010 898 0893
010.898.0893
010-405-3412
02-878-8888

이메일

~~[\w.]+@[.\w]+~~

/[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]/

->
hello@daum.net
hello-test.wow@songsong.co.kr

youtube ID

/(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/)([a-zA-Z0-9-_]{11})/g

https://www.youtu.be/-ZClicWm0zM
https://youtu.be/-ZClicWm0zM
youtu.be/-ZClicWm0zM

->
-ZClicWm0zM

youtubeID만 가져옴
?:를 이용해 표현식으로 작성한 3가지 그룹 중에서 원하는 그룹만 가져올 수 있게 함

필요한 텍스트는 https://로 시작하는 글자 뒤에 위치하지만, https://텍스트 자체가 필요한 것은 아니다.

매치하는 텍스트 덩어리 중 필요한 텍스트만 그루핑해서 캡쳐링. ?:로 묶어 필요한 텍스트를 찾는 조건으로 활용하되, 그 자체를 사용하지는 않는 것을 알 수 있다.

 

---

자바스크립트 활용

const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/)([a-zA-Z0-9-_]{11})/;
const url = 'https://www.youtu.be/-ZClicWm0zM';

url.match(regex);
// 배열이 리턴됨
// ['https://www.youtu.be/-ZClicWm0zM', '-ZClicWm0zM']
// [매칭되는 전체 텍스트 그룹, ?:로 캡쳐링되지 않은 그룹을 걸러낸 캡쳐링 된 텍스트 그룹]

const result = url.match(regex);
console.log(result[1]); // -ZClicWm0zM

---

추가 링크

강좌 끄트머리에서 소개하는 사이트로, 게임 형식으로 다양한 문법 연습을 할 수 있다.

https://regexone.com/

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs

조금 더 복잡한 내용이 포함되어 있다. 그룹 별 연산 등등 추가로 더 공부하고 싶다면 아래 페이지 참고해보자.

https://heropy.blog/2018/10/28/regexp/

정규표현식, 이렇게 시작하자!

캡쳐링 그룹과 논 캡쳐링 그룹에 대한 더 자세한 설명은 아래 참조

https://blog.rhostem.com/posts/2018-11-11-regex-capture-group

blog.rhostem.com

 

---

정규식 사용하기

자 이제 기본 문법은 이제 알게 되었다. 프로젝트에서 이걸 어떻게 사용할까?

---

정규식을 JS에서 표현하는 방법

리터럴 표기

var reg = /123/gi;

/로 시작해서 /로 끝난다. 변경될 일이 없다면 문자열로 쓰는 것이 편하다.

생성자 함수 이용

var reg = new RegExp("123", "gi");

조건에 따라 정규식이 변경될 수 있다면 함수로 쓰는 게 좋다.

---

정규표현식과 함께 사용하는 JS 메서드

replace()

조건에 맞는 문자열을 찾아 다른 문자열로 치환.

var re = /\d{3}/;
var str = '123';
var newstr = str.replace(re, 'ㅎㅎ');
console.log(newstr);  // ㅎㅎ

var re = /\d/;
var str = 'abcd123abcd';
var newstr = str.replace(re, '');
console.log(newstr);  // abcdabcd
// 이렇게 필요없는 문자열을 없애는 용도로도 활용 가능

match()

정규식에 알맞는 문자열을 찾고 찾은 문자열들로 구성된 배열을 반환

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);

console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
// A부터 E 알파벳 1글자씩 그루핑
// 플래그에 i가 있으므로 대소문자 구분 X

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /(ABC)/g;
var matches_array = str.match(regexp);

console.log(matches_array);
// ['ABC']
console.log(matches_array[0]);
// 'ABC'
// 캡쳐링된 문자열 하나만 찾고 싶다면

이외 다양한 자바스크립트 메서드는 아래 MDN 참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions/#정규식_사용하기

정규 표현식 - JavaScript | MDN

---

이 정도 내용이면 웹에서 정규식을 찾아 사용하더라도 어떤 구조를 갖고 어떻게 굴러가는지 대략 이해가 될 듯.

다음 번에는 이걸 프로젝트에서 어떻게 사용하는지 알아보자.