JavaScript의 내장 함수 - match()

JavaScript에서 문자열을 다루는 작업은 매우 빈번하게 발생합니다. 특히 특정 패턴을 찾거나, 문자열에서 일치하는 값을 추출하는 작업이 중요합니다. match() 함수는 이러한 작업을 수행하는 대표적인 메서드로, 정규 표현식(regular expression)과 결합하여 강력한 기능을 제공합니다. 이번 글에서는 match() 함수의 기본 개념과 다양한 예시를 통해 이를 깊이 있게 살펴보겠습니다.

1. match() 함수란?

match() 함수는 문자열에서 특정 패턴을 찾고, 그 결과를 배열로 반환합니다. 이때, 찾는 패턴은 정규 표현식으로 표현되며, 정규 표현식의 플래그 설정에 따라 결과가 달라질 수 있습니다. 기본적으로 match() 함수는 일치하는 값을 찾으면 해당 값만 배열로 반환하고, 찾지 못하면 null을 반환합니다.

2. 기본 문법

match() 함수의 기본 문법은 아래와 같습니다.

string.match(regexp);

• string: 검색을 수행할 대상 문자열
• regexp: 검색할 정규 표현식 (Regular Expression)

3. match() 함수의 동작 방식

match() 함수는 정규 표현식과 함께 사용되며, 여러 플래그와 조합하여 다양한 방식으로 사용할 수 있습니다. 가장 기본적인 동작 방식은 문자열에서 첫 번째로 일치하는 값을 찾고, 이를 배열로 반환하는 것입니다.

const str = "Hello, World!";
const result = str.match(/World/);
console.log(result); // ["World"]

위 예시에서는 "World"라는 문자열을 찾는 정규 표현식을 사용하였고, 일치하는 값을 배열로 반환한 것을 볼 수 있습니다.

4. 정규 표현식 플래그에 따른 match() 동작

정규 표현식에는 다양한 플래그가 존재합니다. 가장 흔히 사용되는 플래그로는 g, i, m 등이 있습니다. match() 함수는 이러한 플래그에 따라 동작 방식이 달라집니다.

1) g 플래그 (global search)

g 플래그는 전체 문자열에서 일치하는 모든 값을 찾아 반환합니다. 만약 g 플래그가 없다면 첫 번째로 일치하는 값만 반환됩니다.

const str = "Banana, apple, Banana!";
const result = str.match(/Banana/g);
console.log(result); // ["Banana", "Banana"]

위 예시에서 g 플래그가 없었다면 첫 번째 Banana만 반환되었겠지만, g 플래그 덕분에 모든 Banana를 찾아 배열로 반환합니다.

2) i 플래그 (case-insensitive search)

i 플래그는 대소문자를 구분하지 않고 일치하는 값을 찾습니다. 즉, 대문자와 소문자를 동일하게 취급합니다.

const str = "Hello, hello!";
const result = str.match(/hello/i);
console.log(result); // ["Hello"]

위 코드에서 i 플래그가 없다면 hello만 일치하는 값으로 간주했겠지만, i 플래그 덕분에 대소문자를 구분하지 않고 Hello도 일치하는 값으로 반환합니다.

3) g와 i 플래그의 조합

g 플래그와 i 플래그를 조합하면, 전체 문자열에서 대소문자를 구분하지 않고 모든 일치하는 값을 찾을 수 있습니다.

const str = "JavaScript is great. I love javascript!";
const result = str.match(/javascript/gi);
console.log(result); // ["JavaScript", "javascript"]

위 예시는 g와 i 플래그가 함께 사용된 예로, 대소문자 구분 없이 문자열 전체에서 JavaScript와 javascript 모두 찾아냅니다.

5. 그룹화와 match() 함수

정규 표현식에서 괄호를 사용하여 패턴을 그룹화하면, match() 함수는 그룹화된 부분까지 반환합니다. 이를 활용하면 더 세밀한 검색과 추출 작업이 가능합니다.

const str = "2024-10-07";
const result = str.match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(result);
// ["2024-10-07", "2024", "10", "07"]

이 코드에서는 연도, 월, 일을 각각 그룹화하여 찾았습니다. result[1]은 연도, result[2]는 월, result[3]은 일을 나타냅니다.

6. match()와 exec()의 차이점

자바스크립트에는 match() 외에도 exec()라는 함수가 있습니다. 이 둘은 유사하지만, exec()는 더 복잡한 기능을 제공합니다. 가장 큰 차이점은 exec()는 매번 일치하는 값을 하나씩 반환하고, 추가적인 정보를 제공한다는 것입니다.

const regex = /(\d{4})-(\d{2})-(\d{2})/g;
const str = "2024-10-07, 2023-09-06";
let match;

while ((match = regex.exec(str)) !== null) {
  console.log(
    `Found: ${match[0]}, Year: ${match[1]}, Month: ${match[2]}, Day: ${match[3]}`
  );
}
// Found: 2024-10-07, Year: 2024, Month: 10, Day: 07
// Found: 2023-09-06, Year: 2023, Month: 09, Day: 06

위 예시에서 exec()는 g 플래그를 사용할 때 반복적으로 실행하여 여러 개의 일치 항목을 찾을 수 있습니다.

7. 활용 사��

1) 이메일 유효성 검사

match() 함수는 정규 표현식을 사용해 문자열의 유효성을 검사할 때 자주 사용됩니다. 예를 들어, 이메일 주소의 유효성을 검사할 수 있습니다.

const email = "test@example.com";
const result = email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);

if (result) {
  console.log("Valid email!");
} else {
  console.log("Invalid email.");
}
// Output: Valid email!

2) URL에서 도메인 추출

match() 함수로 특정 패턴을 사용해 URL에서 도메인을 추출할 수 있습니다.

const url = "https://www.example.com/path?query=123";
const result = url.match(/https?:\/\/(www\.)?([a-zA-Z0-9.-]+)\//);
console.log(result[2]); // example.com

8. 결론

match() 함수는 문자열에서 특정 패턴을 찾고, 그 결과를 배열로 반환하는 매우 유용한 도구입니다. 정규 표현식과 함께 사용하여 강력한 문자열 검색 및 추출 작업을 수행할 수 있으며, 다양한 플래그와 조합하여 원하는 방식으로 동작하게 만들 수 있습니다. 이메일 유효성 검사, 도메인 추출과 같은 실무적인 예시로 match() 함수의 활용성을 확인할 수 있었습니다.