자바스크립트 match() 메서드란?
자바스크립트의 match() 메서드는 문자열 안에서 지정한 정규 표현식(regular expression)과 일치하는 부분을 검색하고, 일치하는 결과를 배열 객체로 반환합니다. 만약 일치하는 결과가 하나도 없다면 null을 반환합니다.
정규 표현식과 함께 사용하면 단순 검색을 넘어 특정 패턴에 맞는 단어나 숫자를 손쉽게 추출할 수 있어, 문자열 처리 작업에서 매우 유용하게 활용됩니다.
기본 문법
str.match(regexp)
- regexp: 검색에 사용할 정규 표현식 객체입니다.
반환값의 특징
g플래그를 사용하면 → 문자열 내 모든 일치 결과를 배열로 반환합니다.g플래그 없이 사용하면 → 첫 번째 일치 정보와 캡처 그룹 등 상세 정보를 담은 배열을 반환합니다.- 일치하는 결과가 없으면 →
null을 반환합니다.
match() 메서드 예제 코드
다음은 자바스크립트 match() 메서드를 활용한 전체 예제입니다. 문장에서 'ing'이 포함된 부분을 찾아 버튼 클릭 시 화면에 표시해 줍니다.
<!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,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript match()</h1>
<div class="sample">The king bought an expensive ring.</div>
<div style="color: black;" class="result"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to search 'ing' in the above string
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let result = sampleEle.innerHTML.match(/ing/g);
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "Match found : " + result;
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면, 정규 표현식 /ing/g에 의해 문장에서 'ing'이 포함된 단어인 king과 ring이 배열 형태로 출력되는 것을 확인할 수 있습니다.
마무리
match() 메서드는 정규 표현식과 결합하면 문자열 검색, 데이터 추출, 입력값 유효성 검사 등 다양한 작업을 간결하게 처리할 수 있는 강력한 도구입니다. g 플래그 유무에 따라 반환되는 결과가 달라진다는 점만 기억하면, 실무에서도 손쉽게 활용할 수 있습니다.