후방탐색(Lookbehind)이란?
정규식에서 후방탐색 어서션(Lookbehind Assertion)은 특정 패턴 앞에 다른 패턴이 존재하는 경우에만 해당 패턴을 매칭하도록 하는 기능입니다. 즉, 매칭 대상 문자열의 앞부분을 조건으로 검사하되, 그 앞부분 자체는 결과에 포함하지 않습니다.
예를 들어, "$50", "$99"처럼 달러 기호($) 뒤에 오는 숫자만 추출하고 싶다면, 후방탐색을 사용해 달러 기호는 결과에서 제외하고 숫자만 깔끔하게 가져올 수 있습니다.
기본 문법
- 긍정형 후방탐색:
(?<=패턴)— 앞에 해당 패턴이 있을 때만 매칭 - 부정형 후방탐색:
(?<!패턴)— 앞에 해당 패턴이 없을 때만 매칭
예제 코드
아래 예제는 버튼을 클릭하면 문장에서 테이블 가격(달러 기호 뒤의 숫자)만 추출하여 화면에 표시합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>후방탐색 어서션 예제</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">테이블 4개의 가격은 $50, $99, $121, $150 입니다.</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 priceRegex = /(?<=\$)\d+/g;
btnEle.addEventListener("click", () => {
resEle.innerHTML = "테이블 가격 = " + sampleEle.match(priceRegex);
});
</script>
</body>
</html>코드 설명
핵심은 다음 정규식 패턴입니다.
const priceRegex = /(?<=\$)\d+/g;
(?<=\$)— 긍정형 후방탐색으로, 바로 앞에 달러 기호($)가 있는 경우에만 매칭합니다.$는 정규식에서 특수 문자이므로 역슬래시(\)로 이스케이프 처리했습니다.\d+— 하나 이상의 연속된 숫자를 의미합니다.g플래그 — 문자열 전체에서 일치하는 모든 항목을 찾습니다.
따라서 이 패턴은 "$50, $99, $121, $150"에서 50, 99, 121, 150만 배열로 반환하며, 달러 기호는 결과에 포함되지 않습니다.
실행 결과
위 코드를 실행하면 초기 화면에는 샘플 문장과 버튼이 표시됩니다.
'클릭하세요' 버튼을 누르면 초록색 결과 영역에 다음과 같이 가격 목록이 출력됩니다.
테이블 가격 = 50,99,121,150
브라우저 호환성 참고
후방탐색 어서션은 ES2018(ES9)에서 도입된 기능으로, Chrome, Edge, Firefox, Safari 등 최신 브라우저에서 지원됩니다. 다만 구버전 브라우저(특히 Safari 16.4 미만)에서는 지원되지 않으므로, 호환성이 중요한 프로젝트에서는 사용 전 지원 범위를 확인하는 것이 좋습니다.