[Javascript] Regex/Regular Expression/정규표현식

 

RegExp.prototype.exec	String.prototype.match
문자열에 대해 정규식과 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우, null 반환) example) 정규식.exec(문자열)	정규식으로 문자열에서 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우,  null 반환) example) 문자열.match(정규식)

 

 

 

차이점1. g 플래그 사용

Case1) 단순 정규 표현식

const execTest = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec("2024-04-15");
console.log(execTest)

// print log
// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

console.log(execTest.groups)
// print log
// { year: '2024', month: '04', day: '15' }

console.log(execTest.groups.year)
// print log
// 2024

 

const matchTest = "2024-04-15".match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
console.log(matchTest)

// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

 

 

Case2) g플래그 사용 정규식

- exec의 경우, 동일한 결과

const execTest = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g.exec("2024-04-15");
console.log(execTest)

// print log
// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

console.log(execTest.groups)
// print log
// { year: '2024', month: '04', day: '15' }

console.log(execTest.groups.year)
// print log
// 2024

 

- match의 경우, 결과 배열만 반환

const matchTest = "2024-04-15".match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g);
console.log(matchTest)

// [ '2024-04-15' ]

 

 

 

차이점2.  캡처 그룹(Capture group) 사용 시, 반복 검색 여부

- exec의 경우, 첫 매칭 정보만 반환함  

const execTest = /(?<babo>\d{4})/g.exec("2024-2025-2026");
console.log(execTest);

// print log
// [
//   '2024',
//   '2024',
//   index: 0,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2024' }
// ]

 

- match의 경우, 모든 매칭 정보를 반환함.

const matchTest = "2024-2025-2026".match(/(?<babo>\d{4})/g);
console.log(matchTest);

// print log
// [ '2024', '2025', '2026' ]

 

 

 

차이점3. 반복문을 통한 exec 사용

- exec의 경우, 반복문을 통해 사용했을 경우 반환 값과 lastIndex를 계속해서 갱신함. 
- 더 이상 찾을 수 없을 경우, null 반환 및 lastIndex 값을 0으로 초기화함.

const execRegex = /(?<babo>\d{4})/g;
while((result = execRegex.exec("2024-2025-2026")) !== null) {
    console.log(result)
    console.log(`Found ${result[0]}. Next starts at ${execRegex.lastIndex}`)
}


// print log
// [
//   '2024',
//   '2024',
//   index: 0,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2024' }
// ]
// Found 2024. Next starts at 4


// [
//   '2025',
//   '2025',
//   index: 5,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2025' }
// ]
// Found 2025. Next starts at 9


// [
//   '2026',
//   '2026',
//   index: 10,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2026' }
// ]
// Found 2026. Next starts at 14

 

• 장점: index, lastIndex, input 같은 데이터 활용 가능.
• 단점: 반복문을 통한 exec 사용해야 여러 반환값 탐색 가능.

 

 

 

 

exec와 match의 장/단점을 골고루 합친 String.prototype.matchAll 기능도 있음.

 

 

참고) https://bsscl.tistory.com/84