자바스크립트 match() 함수 특정 문자 찾기

자바스크립트에서 문자열 내에서 특정 문자를 찾아야 하는 경우가 종종있다. 다양한 방법이 있는데, 오늘은 그 중에서 match() 함수를 활용한 방법을 정리해보려고 한다.

match() 함수는 전체 문자열에서 찾고자 하는 문자를 매개변수로 전달하면 결괏값을 배열 형태로 반환해주는 함수다. 만약 찾고자 하는 값이 없으면 null이 반환된다. 사용방법은 매우 간단하지만 해당 함수는 어떠한 특징을 가지고 있는지 하나씩 살펴보도록 하자.

---

match() 함수의 특징

자바스크립트의 match() 함수는 문자열 메서드 중 하나로서, 대상 문자열 내에서 정규 표현식과 일치하는 부분을 찾아주는 기능이다.

match() 함수는 주어진 문자열에서 정규 표현식과 일치하는 부분을 배열로 반환하는데, 이 때, 정규 표현식을 매개변수로 받고, 해당 값과 일치하는 부분을 찾게 된다. 이를 통해서 패턴에 따라 다양한 문자열을 찾을 수 있다.

일치하는 값이 있는 경우에는 배열로 반환하게 되는데, 이 배열에는 정규 표현식과 일치하는 모든 부분이 포함되고, 정규 표현식에 전역 플래그가 있으면 모든 일치 항목을 찾아 반환하고, 그렇지 않으면 첫 번째 일치 항목만 반환한다.

그리고 match() 함수는 정규 표헌식 그룹을 사용하여 일치하는 부분을 더 세분화할 수 있다. 그룹을 사용하면 특정 부분만 추출할 수 있어 더 유연한 검색을 할 수 있다.

마지막으로 일치하는 값이 없으면 null을 반환하게 된다.

이와 같은 특징들을 통해 정리하면 match() 함수는 문자열에서 정규 표현식을 활용하여 특정 패턴을 찾고, 이를 배열로 반환하여 다양한 문자열 처리를 할 수 있도록 도와주는 기능이라고 볼 수 있다.


그럼 위의 특징들을 기반으로 간단한 예제를 통해서 자세히 알아보도록 하자.

---

기본 예제 코드

var str = "안녕하세요. 문자열을 찾아보세요.“;
var result = str.match(/문자열/);

위의 코드는 문자열에서 기본적으로 특정 문자를 찾는 예시 코드다.
match() 함수의 매개변수로 /문자열/ 이라고 전달하였는데, 문자열을 슬래시( / )로 감싸는 이유는 해당 문자열의 시작과 끝을 알 수 있고, 정규 표현식으로 나타내는 표현 방식이기 때문이다. 굳이 감싸지 않고도 문자열만 넘기면 찾을 수 있는데, 정규 표현식을 이용한 패턴 검색은 어려울 수 있다.

그렇기 때문에 위와 같이 슬래시( / )로 감싸 정규 표현식으로 넘겨주는 것이 좋다.

---

전역 플래그를 활용한 예제 코드

var str = "안녕하세요. 안녕. 반가워";
var regex = /안녕/g; // "안녕"에 일치하는 정규 표현식 (전역 플래그 사용)
var result = str.match(regex);

console.log(result); 
// ["안녕", "안녕"]

위의 코드는 정규 표현식에서 전역 플래그를 사용하여 문자열에서 찾고자하는 문자를 모두 찾아주는 예제 코드다.
정규 표현식을 사용한 문자열 /안녕/ 뒤에 g를 붙여주게 되면 해당 문자를 모두 찾아 배열로 반환하게 된다.
전체 문자열에서 “안녕”이라는 키워드가 두 개 포함되어 있기 때문에 결과값은 ["안녕", "안녕"]와 같이 나오게 된다.

이와 같이 전역 플래그를 잘 활용한다면 다양한 상황에서 유용하게 사용할 수 있다.

---

그룹을 활용한 예제 코드

var str = "The price of apple is $2.50, and the price of orange is $1.80";
var regex = /(\$[\d.]+)/g; // 가격을 나타내는 패턴을 그룹으로 나누는 정규 표현식
var result = str.match(regex);

console.log(result); 
// ["$2.50", "$1.80"]

위의 코드는 정규 표현식을 활용하여 문자열 내에 가격을 추출하는 예제 코드다.
정규 표현식 그룹을 사용하여 해당 항목이 일치하는 문자를 찾아주는 방식인데, 찾고자 하는 문자열은 $로 시작하고 숫자 및 소수점을 포함하는 가격 문자를 찾는 정규 표현식이다.
[]는 문자 집합을 나타내고, \d는 숫자, .은 소수점을 나타낸다. 배열 뒤의 +는 앞의 문자 또는 문자 집합이 한 번 이상 반복됨을 나타낸다.

그래서 위의 정규 표현식 그룹을 활용하면 결과값으로
["$2.50", "$1.80"]가 반환되게 된다.


정규 표현식을 깊이있게 익혀둔다면 정말 다양한 언어, 환경에서 손쉽게 활용할 수 있다.

---

일치 항목이 없는 예제 코드

var str = "There is no match in this string";
var regex = /apple/;
var result = str.match(regex);

console.log(result); 
// null

위의 코드는 문자열에서 일치 항목이 없을 때 null이 반환되는 예제 코드다.
문자열에서 /apple/ 키워드를 찾고자 하는데 일치 항목이 없다면 빈 배열이 아닌 null을 반환하기 때문에 match() 함수를 사용할 때에는 이부분을 반드시 고려하여 처리하는 것이 중요하다.



위의 코드는 match() 함수를 사용할 때 대소문자 구분에 대한 예제 코드다. match() 함수는 대소문자를 구분하기 때문에 찾고자 하는 문자를 대문자/소문자 변경 후 찾아주는 것이 좋고, 대문자로 시작하는지, 소문자만 포함되는지 등 키워드의 특징을 상세히 파악하고 사용하는 것이 좋다. 그렇지 않으면 위외 같이 null이 반환되게 된다.

혹시나 대소문자의 구분이 필요하지 않고 찾고자하는 문자만 일치하고자 한다면, 정규 표현식의 무시 플래그인 i를 붙여주면 된다. /String/i

---

대소문자 구분 예제 코드

var str = "There is no match in this string";
var regex = /String/;
var result = str.match(regex);

console.log(result); 
// null

---

match() 함수 사용 시 주의사항

위에서 정리한 바와 같이 match() 함수는 특정 문자를 찾는데 매우 우용한 기능이다. 정규 표현식을 통해서 손쉽게 다양한 패턴의 문자들을 찾아내는 것 또한 매우 유용하다. 하지만 이러한 기능도 사용하기 전 주의사항을 체크해보고 사용하는 것이 좋다.


정규 표현식
match() 함수는 정규 표현식을 사용하여 문자열을 검색하기 때문에 정규 표현식의 문법과 사용법을 잘 이해하고 사용해야 한다. 그렇지 않으면 예기치못한 에러가 발생할 수 있다.

대소문자 구분
위에서 예제를 통해 알아본 것과 같이 match() 함수는 대소문자를 구분한다. 그렇기 때문에 정확한 값을 찾기 위해 대소문자 구분이 정확한 패턴을 지정하는 것이 중요하다.
대소문자를 무시하고 키워드만 무조건 일치하는 값을 찾으려면 정규 표현식 무시 플래그 i를 붙여주면 된다.

일치하지 않는 항목
match() 함수를 사용하여 특정 문자를 찾을 때 일치하는 항목이 없다면 빈 배열이 아닌 null을 반환하게 된다. 코드상에서는 배열값을 기준으로 처리가 되기 때문에 반드시 null 처리를 해주어야 한다.

성능
match() 함수는 정규 표현식을 사용하여 문자열을 검색하기 때문에 대량의 데이터나 반복 작업에서는 성능에 영향을 줄 수 있다. 성능을 고려해야 하는 환경이라면 최적화를 하거나 다른 대안을 고려해야 한다.

크로스 브라우저 호환성
match() 함수는 자바스크립트의 내장 함수지만, 모든 브라우저에서 완벽하게 호환되지 않을 수 있다. 특히 정규 표현식의 고급 기능을 사용하는 경우에는 크로스 브라우저 호환성을 고려해야 한다.


위와 같이 match() 함수의 주의사항을 고려하여 사용하는 것이 중요하고, 특히 성능과 브라우저 호환성은 많은 부분에서 고려하는 문제이기 때문에 해당 함수를 사용하기 전 이 부분을 숙지하고 있는 것이 좋다.

---

마무리

프로그래밍 작업에서 특정 문자를 찾는 것은 매우 중요하다. 아주 다양한 환경에서 필요로 하는 작업이기 때문이다. 자바스크립트와 같이 동적으로 처리되는 언어에서 문자열을 찾아 처리하는 경우에서도 매우 중요한 작업이라고 할 수 있다.
match() 함수가 아니더라도 문자열을 찾는 방법은 다양한데, match() 함수와 같이 정규 표현식을 활용하여 찾는 방법도 학습하여 선택의 폭을 넓히는 것이 좋다고 생각한다.