Search

반응형

'quantifiers'에 해당되는 글 1건

  1. 2023.01.08 [자바스크립트]정규표현식 Quantifiers, 수량자 정규식
반응형

안녕하세요. 신기한 연구소입니다.

이번 포스팅은 역시 자바스크립트 정규표현식 중 수량자(quantifiers)에 대해 같이 코딩하면서 

기능을 살펴보겠습니다.

 

자주 사용하지는 않지만 알아두면 좋은 자바스크립트 정규 표현식 중 수량자(Quantifiers)는

패턴 문자의 반복에 관해 관여하고 매칭시킵니다.

 

Quantifiers(수량자) 란?

매칭할 문자 또는 표현식의 수를 나타냅니다.

 

문자*

* 앞에 문자가 0개 또는 그 이상 있으면 매칭됩니다.

0개라는 의미는 매칭되는 문자가 없어도 매칭이 됩니다.

예를 통해 살펴봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var reg1 = /go*/;
var text1 = 'good morning';
console.log(text1.match(reg1));
//[ 'goo', index: 0, input: 'good morning', groups: undefined ]
 
text1 = 'oh my ghoat';
console.log(text1.match(reg1));
//[ 'g', index: 6, input: 'oh my ghoat', groups: undefined ]
 
text1 = 'my favorite things';
console.log(text1.match(reg1));
//[ 'g', index: 16, input: 'my favorite things', groups: undefined ]
 
text1 = 'hello my friend';
console.log(text1.match(reg1));
//null
cs

패턴은 /go*/로 영문자 g로 시작하고 o가 없거나 1개 이상 매칭되면 됩니다.

4번 라인 결과를 보면 good의 go*패턴으로 o가 2번 나와서 goo가 출력됨을 확인합니다.

7번 라인 결과를 보면 ghoat의 go*패턴으로 g는 있고 o는 0번 매칭되기에 g가 출력됨을 확인합니다. 

11번 라인 결과를 보면 things의 go*패턴으로 g는 있고 o는 0번 매칭되기에 g가 출력됨을 확인합니다.

16번 라인 결과를 보면 문장에 g가 아예 없기에 매칭되는 부분이 없어 null이 출력됨을 확인합니다.

 

문자+

+는 무조건 문자가 1개 이상 매칭되어야 합니다.

뒤에서 배우는 {1, }와 같은 의미입니다.

예제를 같이 코딩하면서 살펴봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var reg2 = /go+/;
var text2 = 'goooooood morning';
console.log(text2.match(reg2));
//[ 'gooooooo', index: 0, input: 'goooooood morning', groups: undefined ]
 
text2 = 'oh my ghooooat';
console.log(text2.match(reg2));
//null
 
text2 =  'my favorite things';
console.log(text2.match(reg2));
//null
 
text2 = 'hello my friend';
console.log(text2.match(reg2));
//null
cs

 

4번라인 결과를 보면 goooooood의 go+패턴으로 gooooooo가 출력됨을 확인합니다.

8번 라인 결과는 gh가 보이지만 최소한 o가 1개 이상이어야 하기에 매칭이 없어 null이 출력됩니다.

12번 라인 결과도 things에서 g는 있지만 o가 없기에 null이 출력됩니다.

16번 라인 결과는 g가 아예 없기에 hello의 o와도 매칭이 안되기에 null을 출력합니다.

 

문자?

?는 앞 문자가 0번 또는 1번만 매칭되는 경우를 의미합니다.

역시 예제를 같이 코딩하면서 알아봅니다.

 

1
2
3
4
5
6
7
8
var reg3 = /e?de?/;
var text3 = 'helped';
console.log(text3.match(reg3));
//[ 'ed', index: 4, input: 'helped', groups: undefined ]
 
text3 = 'coffee grande';
console.log(text3.match(reg3));
//[ 'de', index: 11, input: 'coffee grande', groups: undefined ]
cs

 

4번 라인 결과를 보면 helped에서 패턴 /e?de?/ 중 e?d와 ed가 매칭되어 결과를 보여줍니다.

8번 라인 결과를 보면 grande에서 패턴 /e?de?/ 중 de?와 de가 매칭되어 결과를 보여줍니다.

e가 없어도 되기에 d만 있다면 매칭됩니다.

 

문자{n}

양의 정수 n만큼 정확히 문자수가 일치해야 합니다.

역시 예제 코딩을 통해 같이 알아봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
var reg4 = /o{3}/;
var text4 = 'google';
console.log(text4.match(reg4));
//null
 
text4 = 'gooogle';
console.log(text4.match(reg4));
//[ 'ooo', index: 1, input: 'gooogle', groups: undefined ]
 
text4 = 'goooooogle';
console.log(text4.match(reg4));
//[ 'ooo', index: 1, input: 'goooooogle', groups: undefined ]]
cs

 

4번라인 결과는 google에서 패턴 /o{3}/인 o가 정확히 3개 있는 패턴과 매칭되지 않아서 null이 됩니다.

8번라인 결과는 gooogle에서 패턴 o가 정확히 3개 있기에 매칭되어 ooo가 출력됩니다.

12번라인 결과도 goooooogle에서 패턴o가 정확히 3개 있기에 ooo가 출력되고 뒤의 나머지 o는 무시됩니다.

 

문자{n, }

양의 정수 n만큼 문자가 최소한 일치해야 합니다.

/a{2,}/는 a가 최소 2개 이상은 있어야 한다는 의미입니다.

예제 코딩으로 결과를 알아봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
var reg5 = /o{1,}/;
var text5 = 'zoo park';
console.log(text5.match(reg5));
//[ 'oo', index: 1, input: 'zoo park', groups: undefined ]
 
text5 = 'zo';
console.log(text5.match(reg5));
//[ 'o', index: 1, input: 'zo', groups: undefined ]
 
reg5 = /o{3,}/;
text5 = 'zooooo';
console.log(text5.match(reg5));
//[ 'ooooo', index: 1, input: 'zooooo', groups: undefined ]
cs

 

4번 라인 결과는 zoo에서 패턴/o{1,}/ 최소 o가 한 개 이상이어야 하기에 oo가 출력됩니다.

8번 라인 결과는 zo에서 최소 o가 한 개이기에 o가 출력됩니다.

13번 라인 결과는 zooooo에서 패턴이 최소 o가 3개 이상이어야 해서 ooooo이 출력되었습니다.

 

문자{n,m}

문자가 최소 n개 이상부터 m개까지 매칭됩니다.

m은 항상 n보다 커야 합니다. (n < m)

매칭되는 문자수가 m보다 많아도 m만큼만 일치해서 출력합니다.

예제 코딩으로 같이 살펴봅니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var reg6 = /o{1,3}/;
var text6 = 'zo';
console.log(text6.match(reg6));
//[ 'o', index: 1, input: 'zo', groups: undefined ]
 
text6 = 'zoo';
console.log(text6.match(reg6));
//[ 'oo', index: 1, input: 'zoo', groups: undefined ]
 
text6 = 'zooo';
console.log(text6.match(reg6));
//[ 'ooo', index: 1, input: 'zooo', groups: undefined ]
 
text6 = 'zoooooo';
console.log(text6.match(reg6));
//[ 'ooo', index: 1, input: 'zoooooo', groups: undefined ]
cs

 

4번 라인 결과를 보면 zo에서 /o{1,3}/인 o가 최소 1개부터 3개까지의 패턴에 o가 1개 있어 매칭됩니다.

8번 라인 결과를 보면 zoo에서는 oo가 2개이기에 패턴에 매칭됩니다.

12번 라인 결과를 보면 zooo에서 ooo 가 최대 3개로 매칭됩니다.

16번 라인 결과를 보면 zoooooo에서 o가 최대 3개까지로 ooo만 매칭됩니다.

 

지금까지 자바스크립트 정규 표현식 중 수량자(Quantifiers)에 대해 이해하고

같이 코딩해 봤습니다.

 

반응형