본문 바로가기

Frontend Study - 2/Etc

기본 정규식 사용

코테를 풀면 다른 사람들의 풀이를 보며 놀라곤 한다.

 

무조건 짧은 코드가 좋은 것은 아니겠지만 내가 줄줄이 써놓은 코드를,

누군가 한 두줄로 끝내 놓은 걸 보면 아무래도 비교가 된다.

 

종종 정규식을 이용한 간단한 풀이를 보았는데,

구글링 해서 쓰면 되지라며 공부를 미뤄왔다. 

어디서 어떤 업무를 맡게 될지도 모르고, 몰라서 손해보는 것보다는 역시나 알고 있는게 좋을 것 같다.

 

 

/regex/i

기본적인 생김새는 이렇다.

 / 사이에 정규식이 들어가고 그 뒤에 i flags가 들어온다.

맨 뒤의 플래그는 정규표현식의 옵션이다. 정규식으로 검색을 하는데 그 검색에 어떤 옵션을 넣을 것인지를 결정한다.

 

예를 들면 g는 (g)lobal의 g로 대상 문자열내의 모든 패턴들을 찾아 내는 것을 의미한다.

i는  (i)gnore case로 영문 대소문자를 구분하지 않게 된다. 

m은 (m)ulti line으로 여러 줄의 문자열인 경우에도 검색하는 것을 의미한다.

 

보통 gm을 많이쓴다.

 

/regex/gm

 

Groups and ranges

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

 

ex)

/gr(e|a)y/gm

- gr로 시작하고 y로 끝나면서 중간에 e 또는 a 값이 있는 단어 선택. (grey, gray)

 

/gr(?:e|a)y/gm

- ?: 을 쓰면 값을 기억하지 않는다. 나중에 match를 통해 정규식 조건에 맞는 값을 찾을 때 위의 값은 남지 않는 것이다. 

 

/gr[ead]y/gm

- 괄호 안에 있는 모든 값 가능. 어느 하나라도 만족 시키면 가능. (grey, gray, grdy)

 

/gr[efghij]y/gm 
-> /gr[e-j]y/gm

- 사용하여 축약해서 표현가능. 숫자도 동일하게 표기 가능. 

 

/[a-zA-Z0-9]/gm

- 자주 쓰이는 정규표현식. a-z, A-Z, 0-9 모두 선택.

 

/[^abc]/gm

- 제외한것을 찾고 싶을 때 꺽쇠추가. a, b, c 셋다 아닌 것을 선택. 

 

Quantifiers

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

 

/gra?y/gm // a가 없거나 있는 경우
/gra*y/gm // a가 없거나 있거나 많은 경우
/gra+y/gm // a가 있거나 많은 경우
/[gra{2}y/gm //a가 두번나오는 경우 graay
/[gra{2,}y/gm // a가 최소 두번 나오는 경우 graay, graaay, graaaay...
/[gra{2,3}y/gm // a가 최소 두번 최대 3번 나오는 경우 graay, graaay

 

Boundary-type

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

 

/\bYa/gm // 단어 앞에서 쓰인 Ya 하나. 하나만 쓰였어도 포함. (Ya, YaYaYa 중 맨앞 Ya 하나)
/Ya\b/gm // 단어 뒤에서 쓰인 Ya 하나. 마찬가지로 하나만 쓰여도 포함. (Ya, YaYaYa 중 맨 뒤 Ya 하나)
/\BYa/gm // 단어 앞에서 쓰인 Ya를 제외한 그 뒤의 Ya들. (YaYaYa중 맨 앞 Ya를 제외한 나머지 두개 Ya)
/Ya\B/gm // 단어 뒤에서 쓰인 Ya를 제외한 그 앞의 Ya들.(YaYaYa중 맨 뒤 Ya를 제외한 나머지 두개 Ya)
/^Ya/gm // 문장의 맨 앞의 Ya 하나만 선택
/Ya$/gm // 문장의 맨 뒤의 Ya 하나만 선택

//문장의 맨 앞이 Ya로 시작하지 않거나 문장의 맨 뒤가 Ya로 끝나지 않는다면 선택 x

또한 이 때 뒤의 flags의 m을 빼면 (multiline) 
하나의 통째 paragraph가 문장으로 인식 되어 그것의 맨 처음과 맨 뒤에서만 찾아보게 된다.

 

Character classes

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

 

/./gm // 모든 문자 선택

. 점 자체를 선택하고 싶다면
/\./gm // 역슬래쉬를 붙여주어야 한다. 
--> 괄호도 마찬가지 /\[\]/gm // []

 

\d 이게 음절 하나라는 걸 기억해야한다.

/\d\d\d/gm 이라고 하면 숫자로만 구성된 세글자 짜리 숫자이다.

 

 

연습문제

1) 전화번호만 선택하기

 

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

 

2) 이메일

 

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

 

3) 유툽 주소 아이디 가져오기

 

/(?:https?:\/\/)?(?:w{3}\.)?youtu.be\/([a-zA-Z0-9-]+)/

 

4) 자바스크립트에서 활용하기. 

 

const url = https://www.youtube.com/watch?v=t3M6toIflyQ;
const regex = /(?:https?:\/\/)?(?:w{3}\.)?youtu.be\/([a-zA-Z0-9-]+)/;

const result = url.match(regex);

console.log(result) // [https://www.youtube.com/watch?v=t3M6toIflyQ, t3M6toIflyQ]

result[1] // 우리가 원하는 값을 찾을 수 있다.