JavaScript 정규 표현식과 RegExp 객체

안녕하세요, 열정적인 프로그래머 여러분! 오늘 우리는 JavaScript에서 정규 표현식(RegEx)의 세계로 흥미로운 여정을 떠납니다. RegEx에 대해 들어본 적이 없으신 걱정 마세요 - 우리는 기본부터 시작해 차근차근 올라갈 것입니다. 이 튜토리얼의 끝까지 배우시면, 마치 프로처럼 RegEx의 힘을 사용하실 수 있을 것입니다!

JavaScript - RegExp

정규 표현식이란?

정규 표현식(Regular Expressions, 약자 RegEx)은 문자열의 패턴 일치와 조작에 강력한 도구입니다. 이를 문자열을 설명하는 특별한 언어라고 생각해 보세요. 문자열을 다루는 데 있어 다용도이고 매우 유용한瑞士軍刀와 같은 존재입니다!

간단한 예제로 시작해 보겠습니다:

let pattern = /hello/;
let text = "Hello, world!";
console.log(pattern.test(text));  // 출력: false

이 예제에서 /hello/은 우리의 RegEx 패턴이며, "Hello, world!"라는 텍스트와 일치하는지 테스트하고 있습니다. 결과는 false입니다. 왜냐하면 RegEx는 기본적으로 대소문자를 구분하기 때문입니다.

RegExp 객체

JavaScript에서는 RegExp 객체를 사용하여 RegEx 패턴을 만들 수 있습니다. 다음은 그 방법입니다:

let pattern1 = new RegExp("hello");
let pattern2 = /hello/;

console.log(pattern1.test("hello world"));  // 출력: true
console.log(pattern2.test("hello world"));  // 출력: true

이 두 가지 방법으로 만든 RegExp 객체는 동일합니다. 리터럴 표기법(/pattern/)은 간단성 때문에 더 자주 사용됩니다.

수정자(Modifiers)

수정자는 RegEx 패턴의 동작을 변경할 수 있습니다. 몇 가지 흔한 수정자를 살펴보겠습니다:

수정자	설명
i	대소문자 구분하지 않음
g	전체 일치(첫 번째 일치 외에도 모든 일치 찾기)
m	다중 줄 일치

'이' 수정자를 사용한 예제입니다:

let pattern = /hello/i;
let text = "Hello, World!";
console.log(pattern.test(text));  // 출력: true

이제 우리의 패턴은 대소문자를 구분하지 않고 "Hello"를 일치시킵니다!

괄호(Brackets)

RegEx에서 괄호는 문자 집합이나 범위를 정의하는 데 사용됩니다:

괄호	설명
[abc]	괄호 안의 모든 문자 일치
[^abc]	괄호 안의 문자를 제외한 일치
[0-9]	0에서 9 사이의 모든 숫자 일치
[a-z]	소문자 a에서 z 사이의 모든 문자 일치

예제를 보겠습니다:

let pattern = /[aeiou]/;
console.log(pattern.test("hello"));  // 출력: true
console.log(pattern.test("why"));    // 출력: false

이 패턴은 모든 모음을 일치시킵니다. "hello"에서 일치하지만 "why"에서는 일치하지 않습니다.

횟수(Quantifiers)

횟수는 특정 문자, 그룹 또는 문자 클래스가 일치하기 위해서 필요한 인스턴스 수를 지정합니다.

횟수	설명
*	0번 이상의 발생 횟수
+	1번 이상의 발생 횟수
?	0번 또는 1번의 발생 횟수
{n}	정확히 n번의 발생 횟수
{n,}	n번 이상의 발생 횟수
{n,m}	n번에서 m번 사이의 발생 횟수

재미있는 예제를 보겠습니다:

let pattern = /ba+/;
console.log(pattern.test("b"));      // 출력: false
console.log(pattern.test("ba"));     // 출력: true
console.log(pattern.test("baaaa"));  // 출력: true

이 패턴은 "ba" 뒤에 추가적인 "a"가 여러 개 있는지 일치시킵니다. 마치 양의 울음소리처럼 "baaaa"입니다!

리터럴 문자(Literal Characters)

RegEx에서 리터럴 문자는 그 자체를 일치시킵니다. 예를 들어, /hello/은 정확한 문자열 "hello"를 일치시킵니다.

let pattern = /hello world/;
console.log(pattern.test("hello world"));  // 출력: true
console.log(pattern.test("hello earth"));  // 출력: false

이 패턴은 정확한 문자열 "hello world"를 일치시킵니다.

메타 문자(Metacharacters)

메타 문자는 RegEx에서 특별한 의미를 가집니다:

메타 문자	설명
.	모든 단일 문자 일치
\d	모든 숫자 일치
\D	모든 비숫자 일치
\w	모든 단어 문자 일치
\W	모든 비단어 문자 일치
\s	모든 공백 문자 일치
\S	모든 비공백 문자 일치

메타 문자를 사용한 예제입니다:

let pattern = /\d{3}-\d{3}-\d{4}/;
console.log(pattern.test("123-456-7890"));  // 출력: true
console.log(pattern.test("abc-def-ghij"));  // 출력: false

이 패턴은 일반적인 미국 전화번호 형식을 일치시킵니다.

RegExp 속성

RegExp 객체는 몇 가지 유용한 속성을 가지고 있습니다:

속성	설명
global	"g" 플래그가 설정되었는지 여부
ignoreCase	"i" 플래그가 설정되었는지 여부
multiline	"m" 플래그가 설정되었는지 여부
source	패턴의 텍스트
lastIndex	다음 일치를 시작할 인덱스

이 속성들을 사용하는 방법을 보겠습니다:

let pattern = /hello/gi;
console.log(pattern.global);      // 출력: true
console.log(pattern.ignoreCase);  // 출력: true
console.log(pattern.source);      // 출력: "hello"

RegExp 메서드

마지막으로, RegExp 객체를 사용할 수 있는 몇 가지 메서드를 살펴보겠습니다:

메서드	설명
exec()	문자열에서 일치를 실행
test()	문자열에서 일치를 테스트
toString()	regexp의 문자열 표현

exec() 메서드를 사용한 예제입니다:

let pattern = /\d+/g;
let text = "I have 2 apples and 3 oranges.";
let match;

while ((match = pattern.exec(text)) !== null) {
console.log(`Found ${match[0]} at index ${match.index}`);
}

// 출력:
// Found 2 at index 7
// Found 3 at index 23

이 코드는 텍스트에서 모든 숫자를 찾아 그 위치를 보고합니다.

이제 JavaScript에서 정규 표현식의 기본을 다루었습니다. 연습이 완벽을 만듭니다. 자신만의 패턴을 만들어 테스트해 보세요. 얼마 지나지 않아 문자열 조작 문제를 쉽게 해결할 수 있는 정규 표현식을 사용하시게 될 것입니다!

행복하게 코딩하세요, 그리고 여러분의 정규 표현식이 항상 일치하길 바랍니다!

Credits: Image by storyset