자바스크립트 lastIndex 속성 완벽 가이드 – 정규식 매칭 위치 추적하기

자바스크립트 lastIndex 속성이란?

자바스크립트의 lastIndex 속성은 정규식(RegExp) 객체에서 매칭이 발생한 인덱스 위치를 반환합니다. 그리고 다음 매칭은 해당 위치부터 이어서 진행됩니다.

중요한 점은 lastIndex 속성이 'g'(전역) 플래그가 설정된 경우에만 작동한다는 것입니다. 'g' 플래그가 없으면 매칭 위치가 저장되지 않아 lastIndex 값이 갱신되지 않습니다.

예제 코드

다음은 자바스크립트 lastIndex 속성의 동작을 확인할 수 있는 예제입니다.

<!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: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript lastIndex Property</h1>
<div class="sample">The king bought an expensive ring.</div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 문자열에서 'ing'가 발견된 인덱스를 찾습니다
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let regex = new RegExp("ing", "g");
    regex.test(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += '"ing" found Current Index = ' + regex.lastIndex + "<br>";
        regex.test(sampleEle.innerHTML);
        resultEle.innerHTML += '"ing" found Current Index = ' + regex.lastIndex;
    });
</script>
</body>
</html>

실행 결과

자바스크립트 lastIndex 속성 완벽 가이드 – 정규식 매칭 위치 추적하기

'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과를 확인할 수 있습니다.

자바스크립트 lastIndex 속성 완벽 가이드 – 정규식 매칭 위치 추적하기

코드 설명

new RegExp("ing", "g") – 'ing' 패턴을 전역('g') 플래그와 함께 검색하는 정규식 객체를 생성합니다.
regex.test() – 문자열에서 패턴을 검색하고, 매칭이 성공하면 lastIndex 값을 갱신합니다.
regex.lastIndex – 마지막으로 매칭이 끝난 위치(인덱스)를 반환하며, 버튼을 클릭할 때마다 다음 매칭 위치가 순차적으로 출력됩니다.

위 예제에서 'king', 'ring'처럼 'ing'가 포함된 단어들이 순차적으로 매칭되며, 각 매칭이 발견된 인덱스가 화면에 표시되는 것을 확인할 수 있습니다.