# 그룹 패턴

## 0. 요약

| 기호     | 의미       |
| ------ | -------- |
| ()     | 그룹화 및 캡처 |
| (?:패턴) | 그룹화(캡처X) |
| (?=)   | 앞쪽일치     |
| (?!)   | 부정 앞쪽 일치 |
| (?<=)  | 뒤쪽 일치    |
| (?\<!) | 부정 뒤쪽 일치 |

***

## 1. () 패턴

`()` 패턴은 패턴들의 그룹을 만드는 역할을 한다.

### 1-1. 비그룹화와 그룹화

```javascript
const regExp1 = /lo+/g;
const regExp2 = /(lo)+/g;
```

위의 두 정규식의 차이를 살펴보자.

먼저 `/lo+/` 정규식은 `o` 문자가 하나 이상 반복되는 패턴이다. 하지만 `/(lo)+/`은 문자 `o`가 아니라 문자열 `lo`가 하나 이상 반복되는 패턴이다. 즉 `()` 패턴을 통해 `lo`가 하나로 그룹화된 것이다.

![비그룹화와 그룹화](https://3395804243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtlrW8c4MEVWoel5YVxSk%2Fuploads%2Fgit-blob-3aad8a620ce7ad6a2a39290c49b34a1eae3e8958%2FregExpPattern31.png?alt=media)

`/lo+/` 정규식을 통해 `lo`, `looo`가 매칭된 것을 확인할 수 있다.

![비그룹화와 그룹화](https://3395804243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtlrW8c4MEVWoel5YVxSk%2Fuploads%2Fgit-blob-8b9beb2c7f1b5e69b45ed20dbf8ae74ac1bda686%2FregExpPattern32.png?alt=media)

`/(lo)+/` 정규식을 통해 `lo`, `lolo`가 매칭된 것을 확인할 수 있다.

### 2-1. 캡처

`()` 패턴은 캡처라는 것을 진행한다. 아래의 코드를 보자.

```javascript
const regExp = /(lo)+/;
const str = 'lolololo';

str.match(regExp); // ['lolololo', 'lo']
```

정규식의 캡처로 인해 `()` 패턴 내의 `lo` 문자열이 그룹화하여 캡처된다. 이렇게 캡처된 `lo`문자열은 `+` 패턴으로 인해 1회 이상 연속으로 반복되는 문자를 검색하는데 사용되고 모두 매칭이 끝난 뒤 캡처된 `lo`가 검색된다.

즉, 아래와 같은 순서로 진행된다.

1. 그룹화된 `lo`를 `+` 패턴과 함께 검색하여 `lolololo`를 반환한다.
2. 캡처된 `lo`를 추가 반환한다.

### 2-2. 캡처 예시

또 다른 예시를 살펴보자.

```javascript
const string = 'hello! 안녕하세요.';
const regExp = /(\w..)(\W+)/;

string.match(regExp); // ['llo! 안녕하세요.', 'llo', '! 안녕하세요.']
```

1. 정규 표현식의 `()` 패턴 내의 `\w..`와 `\W+` 패턴을 순서대로 캡처
2. `\w..` 패턴으로 `llo`가 매칭
3. `\W+` 패턴으로 `안녕하세요.`가 매칭
4. 최종적으로 `llo 안녕하세요.`가 반환
5. 첫 번째 캡처한 표현식 `\w..`로 `llo`가 반환
6. 두 번째 캡처한 표현식 `\W+`로 `안녕하세요.`가 반환

***

## 3. (?:패턴) 패턴

`(?:패턴)` 패턴은 그룹을 지어서 찾지만 찾아진 문자열에 그룹 정보를 기록하지 않는다. 즉, 캡처를 하지 않는다. 해당 패턴은 정규식 그룹화 캡처 기능을 통해 추가적인 결과값을 얻기 싫을 때 사용할 수 있다.

```javascript
const regExp = /(?:lo)+/;
const str = 'lolololo';

str.match(regExp); // ['lololo']
```

***

## 4. (?=) 패턴과 (?!) 패턴

`(?=)` 패턴은 바로 앞에 명시된 패턴을 찾는데, `(?=)` 패턴을 만족하는 경우만 찾는다. `(?!)` 패턴은 `(?=)` 정반대로 `(?!)` 패턴을 만족하지 않는 경우만 찾는다.

풀어 설명하자면 아래와 같다.

* `(?=)`: 앞에 명시된 패턴이 `(?=)` 내에서 명시된 패턴 앞에 존재해야 한다.
* `(?!)`: 앞에 명시된 패턴이 `(?!)` 내에서 명시된 패턴 앞에 존재하면 안된다.

### 4-1. (?=) 패턴 사용예시

정규 표현식은 `/\w{2}(?=e)/g` 이다. 이는 문자를 2개 선택할 것인데 `e` 문자 앞에 붙은 것만 찾는다는 의미를 가진다.

여기서 문자는 밑줄 문자를 포함한 영숫자 문자를 뜻한다.

![(?=) 패턴 사용예시](https://3395804243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtlrW8c4MEVWoel5YVxSk%2Fuploads%2Fgit-blob-db9efdcf3dab610cc5d375e10dd73a8607a0cabe%2FregExpPattern33.png?alt=media)

때문에 `kl`, `fl`, `gl`이 매칭된다.

### 4-2. (?!) 패턴 사용예시

정규 표현식은 `/\w{2}(?!e)/g` 이다. 이는 위 정규 표현식과 반대로 `e` 문자 앞에 있는 것을 제외한 길이 2의 문자열을 찾는다는 의미를 가진다.

여기서 문자는 밑줄 문자를 포함한 영숫자 문자를 뜻한다.

![(?=) 패턴 사용예시](https://3395804243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtlrW8c4MEVWoel5YVxSk%2Fuploads%2Fgit-blob-bcb7d0465e8f2f5c64cfab6d7a62e620a0190786%2FregExpPattern34.png?alt=media)

때문에 `e` 문자가 바로 뒤에 있는 길이 2의 문자열을 제외한 `wn`, `le`, `wf` `le`, `go`, `ge`, `do`, `lo`, `hu`가 매칭된다.

***

## 5. (?<=) 패턴과 (?\<!) 패턴

`(?<=)` 패턴은 `(?=)` 과 위치가 서로 바뀌었다고 생각하면 되고 `(?<!)` 패턴은 `(?!)` 패턴과 위치가 바뀌었다고 생각하면 된다.

즉, 찾고자 하는 패턴의 앞쪽에 사용하여 `(?<=)` 또는 `(?<!)` 패턴 내에서 명시된 패턴을 만족하냐 만족하지 않느냐에 따라 결과를 반환한다.

풀어 설명하자면 아래와 같다.

* `(?<=)`: 뒤에 명시된 패턴이 `(?<=)` 내에서 명시된 패턴 뒤에 존재해야 한다.
* `(?<!)`: 뒤에 명시된 패턴이 `(?<!)` 내에서 명시된 패턴 뒤에 존재하면 안된다.

### 5-1. (?<=) 패턴 사용예시

`(?<!)` 패턴의 사용예시만 살펴보고 넘어가자.

정규 표현식은 `/(?<=f)\w+/g`이다. 이는 앞에 `f` 문자가 있어야하고 뒤에는 밑줄 문자를 포함한 영숫자 문자가 1개 이상 반복되는 패턴을 찾는다는 의미를 가진다.

![(?<=) 패턴 사용예시](https://3395804243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtlrW8c4MEVWoel5YVxSk%2Fuploads%2Fgit-blob-07b753a823a01ff7ed6fddb4dfb41b310283c17a%2FregExpPattern35.png?alt=media)

이를 만족하는 것은 `f` 바로 뒤 `fle` 뿐이다.

***

## 6. Conclusion

> 기초적인 정규식에 대해 정리를 끝냈다. 이벙네 정리한 그룹 패턴은 처음 보는 것들이 많아 생소한 느낌을 많이 받았다. 여러 예제를 살펴보며 익숙해 지도록 노력하자. 그 다음 과정은 자바스크립트에서 정규식을 사용하여 메서드에 대한 정리이다. 이번주 내에 정리하도록 하자. 파이팅!

***

## 참고

[\[JS\] 📚 정규표현식(RegExp) - 이해하기 쉽게 정리 + 응용 예제](https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC)\
[정규표현식(Regular Expression, regex)](https://blog.walkinpcm.com/15)

***

📅 2023-01-25