5 April 2022 / JAVASCRIPT

JavaScript(11) - Regular expressions(regex)

JavaScript 관련 포스팅

Regular expression (regex)

1950년, 수학자 Stephen Cole Kleene에 의해 개발됨
slash(/) 안에 찾고자하는 패턴을 작성 후 flag로 옵션을 지정함
→ /pattern/flag

1. Groups or ranges

(1) `|` (or)

/Hi|Hello/gm

→ Hi 또는 Hello 매칭

(2) `()` (group)

/(Hi|Hello)|(And)/gm

→ group #1: Hi 또는 Hello 매칭
→ group #2: And 매칭

/gr(e|a)y/gm

→ gr로 시작, e 또는 a, y로 끝나는 단어 매칭

(3) `(?:)` (group 미지정)

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

→ group을 지정하고 싶지 않다면 ( ) 시작에 ?: 추가

(4) `[]` (`[]`안의 문자 찾기)

/gr[ead]y/gm

→ [] 안의 문자 중 하나라도 만족하는 단어 매칭
gray, grey, grdy

/[a-f]/gm

→ a부터 f까지의 문자를 매칭

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

→ 소문자 a부터 z까지, 대문자 A부터 Z까지, 숫자 0부터 9까지의 문자를 매칭

(5) `[^]` (`[]`안의 문자를 제외한 나머지 찾기)

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

→ 소문자 a부터 z까지, 대문자 A부터 Z까지, 숫자 0부터 9까지의 문자를 제외한 나머지를 매칭

/[가-힣]/gm

→ 한글 단어 매칭
※ 단, 이 방식으로는 ㄱㄴㄷ이나 ㅏㅑㅓㅕ같은 낱글자는 찾을 수 없음

2. Quantifiers

(1) `?` (있거나 없거나)

/gra?y/gm

→ a가 있거나 없는 문자 매칭 gray, gry

(2) `*` (0개 이상)

/gra*y/gm

→ a가 있거나 없거나 많은 문자 매칭 gray, gry, graay, graaay

(3) `+` (하나 혹은 그 이상 연결된)

/gra+y/gm

→ a가 하나 이상 있는 문자 매칭 gray, graay, graaay

(4) `{n}` (`{n}`앞의 문자 n번 반복)

/gra{2}y/gm

→ a가 두 번 반복되는 문자 매칭 graay

(5) `{min,}` (`{min,}`앞의 문자 최소 n번 반복)

/gra{2,}y/gm

→ a가 최소 두 번 반복되는 문자 매칭 graay, graaay

(6) `{min,max}` (`{min,max}`앞의 문자가 최소 min번, 최대 max번 반복)

/gra{2,3}y/gm

→ a가 최소 두 번, 최대 세 번 반복되는 문자 매칭
graay, graaay

3. Boundary-type

- 단어의 경계를 지정해 검색

(1) `\b` (단어의 앞 경계 또는 뒷 경계에서 검색)

/\bYa/gm

→ 단어 앞에 있는 Ya를 매칭
Ya, YaYaYa, Ya

/Ya\b/gm

→ 단어 뒤에 있는 Ya를 매칭
Ya, YaYaYa, Ya

(2) `\B` (`\b`의 경우를 제외한 검색)

/Ya\B/gm

→ 단어 뒤에 있는 Ya를 매칭(/Ya\b/gm)하는 경우를 제외한 매칭
YaYaYa, Ya

- 문장의 경계를 지정해 검색

(3) `^` (문장의 시작에서 검색)

/^Ya/gm

→ 문장의 시작에 있는 Ya를 매칭

(4) `$` (문장의 끝에서 검색)

/Ya$/gm

→ 문장의 끝에 있는 Ya를 매칭

- 전체 문장의 경계를 지정해 검색

※ flag에서 m(multiline)을 선택하지 않으면, 전체 문장으로 경계를 지정해 검색함

/^Ya/g

→ 전체 문장의 시작에 있는 Ya를 매칭

/Ya$/g

→ 전체 문장의 끝에 있는 Ya를 매칭

4. Character classes

(1) \특수문자

/\[/gm

→ \ 뒤의 특수 문자 [ 를 매칭

(2) .

/./gm

→ 줄바꿈 문자를 제외한 모든 문자를 매칭

(3) \d

/\d/gm

→ 숫자(digit)를 매칭

(4) \D

/\D/gm

→ 숫자를 제외한 매칭

(5) \w (소문자 w)

/\w/gm

→ 문자(word)를 매칭

a, b, c, 가, 나, 다, 1, 2와 같은 문자와 숫자를 포함함
특수문자는 포함하지 않지만, _(언더스코어)는 포함함

(6) \W (대문자 w)

/\W/gm

→ 문자를 제외한 매칭

(7) \s (소문자 s)

/\s/gm

→ 공백 문자인 띄어쓰기(space), tap, newline 매칭

(8) \S (대문자 S)

/\S/gm

→ 공백 문자를 제외한 매칭

5. Exercises

1. 전화번호 형태 찾기

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

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

→ 숫자(\d)가 {2,3} 최소 두 번, 최대 세 번 반복 → 숫자(\d)가 {3} 세 번 반복 → 숫자(\d)가 {4} 네 번 반복 → 숫자 사이에는 [- .] - 또는 공백 또는 . 으로 연결

2. 이메일 형태 찾기

dream.coder.ellie@gmail.com
hello@daum.net
hello@daum.co.kr

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

→ [a-zA-Z0-9._+-]+ 문자(소/대문자, 숫자, ., _, +, -)가 하나 이상
→ @ 연결
→ [a-zA-Z0-9-]+ 문자(소/대문자, 숫자, -)가 하나 이상
→ . 연결
→ [a-zA-Z0-9.]+ 문자(소/대문자, 숫자, .)가 하나 이상

3. 특정 문자열 찾기

http://www.youtu.be/-ZClicWm0zM
https://www.youtu.be/-ZClicWm0zM
https://youtu.be/-ZClicWm0zM
youtu.be/-ZClicWm0zM
에서 youtube id인 -ZClicWm0zM 만 가져오기

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

(https?:\/\/)?
→ ?s s가 있어도 되고 없어도 됨
→ :\/\/ ://(특수 문자) 연결
→ ( )? 있어도 되고 없어도 되는 group
(www.)? → ( )? 있어도 되고 없어도 되는 group
youtu.be\/
→ youtu.be/ 연결
([a-zA-Z0-9-]{11})
→ 소/대문자,숫자,-로 이루어진 11자리의 문자 group
결과적으로 group #1(http://), group #2(www.), group #3(youtube id)이 생성됨
```
/(?:https?:\/\/)?(?:www.)?youtu.be\/([a-zA-Z0-9-]{11})/gm
```
→ group #1과 group #2는 grouping하지 않으려면 group의 시작에 (?: )을 입력하면 됨

6. JavaScript 활용

String class의 match함수를 이용할 수 있음
```
const regex= /(?:https?:\/\/)?(?:www.)?youtu.be\/([a-zA-Z0-9-]{11})/;
const url = 'http://www.youtu.be/-ZClicWm0zM';
url.match(regex);
```
배열을 반환함
[0]: 매칭되는 전체 문자열,
[1]: 매칭되는 group의 data

Console

0: “http://www.youtu.be/-ZClicWm0zM”
1: “-ZClicWm0zM”

추가 code를 작성하면,

const result = url.match(regex);
result[1];

Console

‘-ZClicWm0zM’

const searchTarget = "Luke Skywarker 02-123-4567 luke@daum.net\
다스베이더 070-9999-9999 darth_vader@gmail.com\
princess leia 010 2454 3457 leia@gmail.com";

const regex = /\d{2,3}[- ]?\d{3,4}[- ]?\d{4}/g;  
console.log(searchTarget.match(regex));

Console

[‘02-123-4567’, ‘070-9999-9999’, ‘010 2454 3457’]

7. Python 활용

Python은 raw string을 지원해 대표 문자를 표현할 때 역슬래시(\)를 한 번만 쓸 수 있음

  import re

  regex = r'\d{2,3}[- ]?\d{3,4}[- ]?\d{4}'

  search_target = '''이상한 전화번호 0030589-5-95826
  Luke Skywarker 02-123-4567 luke@daum.net
  다스베이더 070-9999-9999 darth_vader@gmail.com
  princess leia 010 2454 3457 leia@gmail.com'''

  # 정규표현식과 일치하는 부분을 모두 찾아주는 파이썬 코드
  result = re.findall(regex, search_target)
  print(result)

Console

[‘02-123-4567’, ‘070-9999-9999’, ‘010 2454 3457’]

8. 유용한 site

https://regexone.com/ → 학습
https://regexr.com/ → 정규표현식 입력시 확인

< 출처 >

“정규표현식 , 더이상 미루지 말자,” 유튜브 비디오, 22:01, 게시자 “드림코딩 by 엘리,” https://youtu.be/t3M6toIflyQ

프로그래머스 정규표현식 온라인 강의

Regular expression (regex)

1. Groups or ranges

(1) | (or)

(2) () (group)

(3) (?:) (group 미지정)

(4) [] ([]안의 문자 찾기)

(5) [^] ([]안의 문자를 제외한 나머지 찾기)

2. Quantifiers

(1) ? (있거나 없거나)

(2) * (0개 이상)

(3) + (하나 혹은 그 이상 연결된)

(4) {n} ({n}앞의 문자 n번 반복)

(5) {min,} ({min,}앞의 문자 최소 n번 반복)

(6) {min,max} ({min,max}앞의 문자가 최소 min번, 최대 max번 반복)

3. Boundary-type

- 단어의 경계를 지정해 검색

(1) \b (단어의 앞 경계 또는 뒷 경계에서 검색)

(2) \B (\b의 경우를 제외한 검색)

- 문장의 경계를 지정해 검색

(3) ^ (문장의 시작에서 검색)

(4) $ (문장의 끝에서 검색)

- 전체 문장의 경계를 지정해 검색

4. Character classes

(1) \특수문자

(2) .

(3) \d

(4) \D

(5) \w (소문자 w)

(6) \W (대문자 w)

(7) \s (소문자 s)

(8) \S (대문자 S)

5. Exercises

1. 전화번호 형태 찾기

2. 이메일 형태 찾기

3. 특정 문자열 찾기

6. JavaScript 활용

Console

Console

Console

7. Python 활용

Console

8. 유용한 site

백엔드 개발자의 노트

(1) `|` (or)

(2) `()` (group)

(3) `(?:)` (group 미지정)

(4) `[]` (`[]`안의 문자 찾기)

(5) `[^]` (`[]`안의 문자를 제외한 나머지 찾기)

(1) `?` (있거나 없거나)

(2) `*` (0개 이상)

(3) `+` (하나 혹은 그 이상 연결된)

(4) `{n}` (`{n}`앞의 문자 n번 반복)

(5) `{min,}` (`{min,}`앞의 문자 최소 n번 반복)

(6) `{min,max}` (`{min,max}`앞의 문자가 최소 min번, 최대 max번 반복)

(1) `\b` (단어의 앞 경계 또는 뒷 경계에서 검색)

(2) `\B` (`\b`의 경우를 제외한 검색)

(3) `^` (문장의 시작에서 검색)

(4) `$` (문장의 끝에서 검색)