자바스크립트 exec() 메서드 완벽 가이드 – 정규식 매칭 결과 확인하기

exec() 메서드란?

자바스크립트의 exec() 메서드는 정규 표현식(RegExp) 객체가 제공하는 메서드로, 지정된 문자열에서 패턴과 일치하는 부분을 검색합니다. 일치하는 텍스트를 찾으면 그 결과를 배열 형태로 반환하고, 일치하는 내용이 없으면 null을 반환합니다.

반환되는 배열에는 일치한 문자열뿐만 아니라 index(일치 시작 위치)와 input(검색 대상 문자열) 같은 추가 정보도 포함되어 있어, 단순히 일치 여부만 확인하는 test() 메서드보다 더 많은 정보를 얻을 수 있습니다.

다음은 자바스크립트 exec() 메서드의 동작을 보여주는 예제 코드입니다.

예제 코드

<!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;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript exec()</h1>
<div class="sample">
Lorem ipsum dolor, sit amet consectetur adipisicing.
</div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above buttons to execute regex
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let sampleStr = sampleEle.innerHTML;
   let pattern = new RegExp("amet");
   document.querySelector(".Btn").addEventListener("click", () => {
      let result = pattern.exec(sampleStr);
      sampleEle.innerHTML += " <br> String matched = " + result;
   });
</script>
</body>
</html>

코드 설명

.sample 클래스를 가진 요소에서 텍스트 내용을 가져옵니다.
new RegExp("amet")를 통해 "amet"이라는 패턴을 가진 정규 표현식 객체를 생성합니다.
버튼을 클릭하면 pattern.exec(sampleStr)이 실행되어 문자열에서 "amet"과 일치하는 부분을 검색합니다.
검색 결과가 화면에 추가로 출력됩니다.

실행 결과

자바스크립트 exec() 메서드 완벽 가이드 – 정규식 매칭 결과 확인하기

위 화면에서 "CLICK HERE" 버튼을 클릭하면 아래와 같이 일치한 문자열이 표시됩니다.

자바스크립트 exec() 메서드 완벽 가이드 – 정규식 매칭 결과 확인하기

문자열 안에 "amet"이 존재하기 때문에 exec() 메서드는 해당 텍스트를 담은 배열을 반환하며, 만약 일치하는 문자열이 없었다면 null이 반환되었을 것입니다.