JavaScript의 lastIndex 속성은 정규식(RegExp) 객체에서 매우 유용한 기능을 제공합니다. 이 속성은 정규식이 문자열에서 일치(match)하는 지점의 인덱스 위치를 반환하며, 다음 검색은 해당 위치부터 이어서 진행됩니다.
주의할 점은 lastIndex 속성은 반드시 'g'(global) 플래그가 설정되어 있을 때만 동작한다는 것입니다. 'g' 플래그가 없으면 매번 문자열 처음부터 검색이 수행되기 때문에 lastIndex 값이 의미 없게 됩니다.
lastIndex 속성의 동작 원리
'g' 플래그가 설정된 정규식에 test()나 exec() 메서드를 호출할 때마다, JavaScript 엔진은 마지막으로 일치한 위치를 기억합니다. 그리고 다음 호출 시에는 그 위치 바로 뒤부터 검색을 재개합니다. 이 덕분에 하나의 정규식 객체로 문자열 내 모든 일치 항목을 순차적으로 찾아낼 수 있습니다.
예제 코드
다음은 lastIndex 속성을 활용하여 문자열에서 'ing'가 나타나는 위치를 순차적으로 찾는 예제입니다.
<!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 속성</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>코드 설명
위 예제의 핵심 로직을 살펴보면 다음과 같습니다.
new RegExp("ing", "g")를 통해 'g' 플래그가 적용된 정규식 객체를 생성합니다. 버튼을 클릭하면 test() 메서드가 실행되어 첫 번째 'ing'('king' 안에 있는)를 찾고, lastIndex에는 그 일치 지점의 끝 인덱스가 저장됩니다. 이후 다시 test()를 호출하면 앞서 저장된 위치부터 검색을 재개하여 두 번째 'ing'('ring' 안에 있는)를 찾아냅니다.
실행 결과
페이지를 처음 열었을 때의 화면입니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 각 단계에서 발견된 'ing'의 인덱스가 표시됩니다.
정리
lastIndex 속성은 'g' 플래그와 함께 사용할 때만 의미가 있으며, 반복적인 패턴 검색에 필수적인 도구입니다. 다만 주의할 점도 있습니다. 새로운 문자열에 대해 처음부터 검색하고 싶다면 lastIndex 값을 직접 0으로 초기화해야 하며, 더 이상 일치하는 항목이 없으면 lastIndex는 자동으로 0으로 리셋됩니다. 이러한 특성을 잘 이해하면 문자열 파싱, 하이라이트 처리 등 다양한 작업에서 정규식을 효율적으로 활용할 수 있습니다.