자바스크립트에서는 정규 표현식의 특정 부분을 하나의 그룹으로 묶어 다룰 수 있습니다. 이는 해당 문자들을 괄호 ()로 감싸는 방식으로 구현되며, ES2018(ES9)부터는 각 그룹에 고유한 이름을 부여할 수 있는 명명된 캡처 그룹(Named Capture Groups) 기능이 추가되었습니다.
명명된 캡처 그룹은 (?<이름>패턴) 형식으로 작성합니다. 단순히 위치 번호로 그룹을 참조하는 기존 방식과 달리, 의미 있는 이름으로 값을 직접 가져올 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.
기본 문법
예를 들어 네 자리 연도를 추출하면서 'year'라는 이름을 지정하려면 다음과 같이 작성합니다.
const yearRegex = /(?<year>\d{4})/;매칭 결과는 groups 객체를 통해 match.groups.year 형태로 손쉽게 접근할 수 있습니다.
예제
다음은 웹 페이지의 문장에서 명명된 캡처 그룹을 사용해 연도를 추출하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>명명된 캡처 그룹 정규 표현식</h1>
<div class="sample">제가 학교를 졸업한 해는 2012년입니다.</div>
<div style="color: green;" class="result"></div>
<button class="btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 명명된 그룹을 사용해 연도를 추출합니다
</h3>
<script>
let sampleEle = document.querySelector(".sample").innerHTML;
let btnEle = document.querySelector(".btn");
let resEle = document.querySelector(".result");
const yearRegex = /(?<year>\d{4})/;
btnEle.addEventListener("click", () => {
resEle.innerHTML = "추출된 연도 = " + sampleEle.match(yearRegex).groups.year;
});
</script>
</body>
</html>코드 설명
/(?<year>\d{4})/: 네 자리 숫자를 매칭하면서 해당 그룹에 'year'라는 이름을 부여합니다.sampleEle.match(yearRegex): 문장에서 정규식과 일치하는 부분을 찾습니다..groups.year: 매칭 결과의groups객체에서 이름이 'year'인 그룹의 값을 가져옵니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 볼 수 있습니다 −
'클릭하세요' 버튼을 클릭하면 −
