JavaScript에서는 match() 메서드와 정규 표현식을 조합하면 문자열 안에서 원하는 패턴과 일치하는 항목들을 손쉽게 찾아낼 수 있습니다. 특히 정규 표현식 끝에 전역(global) 플래그인 /g를 붙이면 첫 번째 일치 항목만 반환하는 것이 아니라, 문자열 전체에서 일치하는 모든 항목이 배열 형태로 반환됩니다. 이 배열을 forEach() 같은 반복문과 함께 사용하면 각 일치 항목을 순서대로 순회하며 처리할 수 있습니다.
예제 코드
다음은 주어진 문장에서 'at'이라는 패턴과 일치하는 모든 단어를 찾아, 일치 항목 개수만큼 결과를 반복해서 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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;
}
.result,
.sample {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>Looping over regex matches</h1>
<div class="sample">
There is a cat lying besides the cricket bat and chasing the rat
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to match words ending with 'at' in the above
sentence</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let text = sampleEle.innerHTML;
BtnEle.addEventListener("click", () => {
text.match(/at/g).forEach((element) => {
resEle.innerHTML += 'Found a match ending with "at" <br>';
});
});
</script>
</body>
</html>출력 결과
위 코드를 실행하면 초기 화면은 다음과 같습니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 일치 항목 개수만큼 메시지가 반복해서 표시됩니다.
핵심 포인트 정리
/at/g: 'at'과 일치하는 모든 부분을 찾는 정규 표현식입니다. 마지막의 g(global) 플래그가 있어야 첫 번째 일치에서 멈추지 않고 문자열 전체를 검색합니다.text.match(/at/g): 일치한 모든 문자열을 요소로 가진 배열을 반환합니다. 예제 문장에는 cat, bat, rat에 포함된 'at'이 총 세 번 나타나므로 길이가 3인 배열이 반환됩니다.forEach(): 반환된 배열을 순회하면서 일치 항목 하나당 한 줄씩 결과 영역에 메시지를 추가합니다.
이처럼 match() 메서드에 /g 플래그를 적용하고 반환된 배열을 반복 처리하면, 복잡한 루프 로직 없이도 정규 표현식 일치 항목을 간단하게 순회할 수 있습니다.