[Javascript] Exec 함수 / Match 함수 / MatchAll 함수 알아보기

1. RegExp.prototype.exec

인수로 전달받은 문자열에 대해 정규식과 일치하는지 탐색을 수행한 한 결과를 배열(없다면 null)로 반환한다.

 

2. String.prototype.match

자신을 호출한 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열(없다면 null)로 반환한다.

 

일단 exec()의 형식은 정규식.exec(문자열) / match()의 형식은 문자열.match(정규식) 로 순서가 반대이다.

그럼 순서에서 차이점만 있는건가...? 했는데 그건 또 아니었음 🤔

 

차이점 1)

정규식에 g 플래그를 붙여서 함수를 실행하면 match는 문자열에서 해당하는 부분을 전부 배열에 넣어서 return 해주지만 exec는 처음 일치하는 부분 하나만 배열에 넣어서 return한다.

const peach = '복숭아빙수 복숭아김치 복숭아스무디';
const exp1 = /복숭아/g;

console.log(peach.match(exp1));
//["복숭아", "복숭아", "복숭아"] 출력

console.log(exp1.exec(peach));
//["복숭아"] 출력

처음것만 리턴할건데 굳이 배열에...?? 싶었지만 또 다른 차이점이 있었다

 

차이점 2)

match의 경우 정규식에 캡처 그룹이 포함되어 있을 경우 해당 문자열 부분을 반복해서 검색하지만 exec는 정규식에  캡처 그룹에 해당하는 값을 같이 반환해준다

const peach = '복숭아빙수 복숭아김치 복숭아스무디';
const exp2 = /복숭아(..)/g;

console.log(peach.match(exp2));
//["복숭아빙수", "복숭아김치", "복숭아스무"] 출력

console.log(exp2.exec(peach));
//["복숭아빙수", "빙수"] 출력

차이점 3) exec는 해당 값을 찾고 lastIndex를 계속해서 갱신한다. 만약 다음 인덱스 이후로 해당하는 값을 찾지 못했으면 null을 반환한 뒤 lastIndex의 값을 0으로 초기화한다.

const peach = '복숭아빙수 복숭아김치 복숭아스무디';
const exp2 = /복숭아(..)/g;
let array;

while ((array = exp1.exec(peach)) !== null) {
  console.log(`Found ${array[0]}. Next starts at ${exp1.lastIndex}.`);
 }
// Found 복숭아. Next starts at 3.
// Found 복숭아. Next starts at 9.
// Found 복숭아. Next starts at 15.

이거는 3번 쓰면서 참고한 글 ⬇️

https://stackoverflow.com/questions/11477415/why-does-javascripts-regex-exec-not-always-return-the-same-value

Why does Javascript's regex.exec() not always return the same value?

그리고 exec과 while문을 쓰는 번거로움 해소 + exec의 index나 input같은 프로퍼티를 쓸 수 있다는 장점이 있는

matchAll 함수가 있다

 

3. String.prototype.matchAll

자신을 호출한 문자열과 정규식과의 매칭 결과(그룹 캡처를 포함)를 배열로 반환한다.

형식은 문자열.matchAll(정규식)

matchAll의 경우 정규식에 g 플래그가 없으면 TypeError가 발생하니 주의가 필요하다🧐

 

틀린 부분 있으면 지적 부탁드립니다! 🙇🏻