[Javascript] exec() 메서드란? (+ Match 함수 / MatchAll 함수)

이번 프로젝트에서 경로 주소별로 헤더에 메뉴 이름을 다르게 주기 위해 사용했다.

Exec 함수

RegExp.prototype.exec() 메서드란?

• 인자로 받은 문자열 (str) 에서 match 를 찾아내고 result array 혹은 null 을 반환한다.
• 자바스크립트 정규표현식을 다룰 때 쓴다.

 

 const pathMatch = /^\/tour\/[^\/]+\/([^\/]+)$/.exec(pathname);
    if (pathMatch) {
        const [, contentTypeId] = pathMatch;
        return getTourTitle(contentTypeId);
    }
    
    
// :contentTypeId에 따라 제목을 반환하는 함수
export  const getTourTitle = (contentTypeId) => {
    switch (contentTypeId) {
        case '12':
            return '관광지';
        case '39':
            return '맛집';
        default:
            return '기타';
    }
};

 

Match 함수

String.prototype.match

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

 

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

 

📌 exec 과 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.

 

 

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

matchAll 함수가 있다

 

 

MatchAll 함수

String.prototype.matchAll

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

문자열.matchAll(정규식)

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

 

 

 

 

 

 

출처:
https://jake-seo-dev.tistory.com/415 [제이크서 위키 블로그:티스토리]
https://bsscl.tistory.com/84
https://stackoverflow.com/questions/11477415/why-does-javascripts-regex-exec-not-always-return-the-same-value

자바스크립트 정규 표현식, exec() 메서드란?