JavaScript에서의 정규표현식 활용
1. JavaScript의 정규표현식 기초
1.1 정규표현식 생성 방법
1.1.1 리터럴 패턴
리터럴 패턴은 슬래시(/)로 감싸서 정규표현식을 생성하는 가장 일반적인 방법입니다.
const regex1 = /hello/; // 기본 패턴
const regex2 = /hello/g; // 전역 검색
const emailRegex = /[\w.-]+@[\w.-]+\.\w+/g; // 이메일 패턴
const regex1 = /hello/; // 기본 패턴
const regex2 = /hello/g; // 전역 검색
const emailRegex = /[\w.-]+@[\w.-]+\.\w+/g; // 이메일 패턴
1.1.2 RegExp 생성자
동적으로 패턴을 생성해야 할 때 사용합니다.
const regex1 = new RegExp('hello');
const regex2 = new RegExp('hello', 'g');
const userPattern = new RegExp(`${username}\\d+`, 'g');
const regex1 = new RegExp('hello');
const regex2 = new RegExp('hello', 'g');
const userPattern = new RegExp(`${username}\\d+`, 'g');
1.2 플래그의 이해
1.2.1 주요 플래그
/pattern/g // g: 전역 검색 (모든 일치 항목 찾기)
/pattern/i // i: 대소문자 구분 없음
/pattern/m // m: 다중 행 모드
/pattern/s // s: .이 개행 문자도 매칭
/pattern/u // u: 유니코드 모드
/pattern/g // g: 전역 검색 (모든 일치 항목 찾기)
/pattern/i // i: 대소문자 구분 없음
/pattern/m // m: 다중 행 모드
/pattern/s // s: .이 개행 문자도 매칭
/pattern/u // u: 유니코드 모드
1.2.2 플래그 조합
/hello/gi // 대소문자 구분 없이 전역 검색
/^hello/gm // 모든 행의 시작에서 hello 검색
/hello/gi // 대소문자 구분 없이 전역 검색
/^hello/gm // 모든 행의 시작에서 hello 검색
2. JavaScript의 정규표현식 메서드
2.1 RegExp 객체 메서드
2.1.1 test() 메서드
패턴이 문자열과 매칭되는지 확인합니다.
const text = "hello world";
/hello/.test(text) // true
/goodbye/.test(text) // false
/[A-Z]/.test(text) // false
const text = "hello world";
/hello/.test(text) // true
/goodbye/.test(text) // false
/[A-Z]/.test(text) // false
2.1.2 exec() 메서드
매칭된 결과를 자세히 반환합니다.
const text = "hello world hello";
const pattern = /\w+/g;
let result;
while ((result = pattern.exec(text)) !== null) {
console.log(result[0]); // 'hello', 'world', 'hello' 순서로 출력
}
const text = "hello world hello";
const pattern = /\w+/g;
let result;
while ((result = pattern.exec(text)) !== null) {
console.log(result[0]); // 'hello', 'world', 'hello' 순서로 출력
}
2.2 String 객체의 정규표현식 메서드
2.2.1 match() 메서드
const text = "hello world hello";
text.match(/\w+/g); // ['hello', 'world', 'hello']
text.match(/Hello/i); // ['hello']
const text = "hello world hello";
text.match(/\w+/g); // ['hello', 'world', 'hello']
text.match(/Hello/i); // ['hello']
2.2.2 replace() 메서드
const text = "hello world";
text.replace(/o/g, '0'); // 'hell0 w0rld'
text.replace(/(\w+)\s(\w+)/, '$2 $1'); // 'world hello'
const text = "hello world";
text.replace(/o/g, '0'); // 'hell0 w0rld'
text.replace(/(\w+)\s(\w+)/, '$2 $1'); // 'world hello'
2.2.3 split() 메서드
"hello,world;hi".split(/[,;]/); // ['hello', 'world', 'hi']
"hello,world;hi".split(/[,;]/); // ['hello', 'world', 'hi']
3. 실전 예제
3.1 이메일 주소 검증
function validateEmail(email) {
const pattern = /^[\w.-]+@[\w.-]+\.\w+$/;
return pattern.test(email);
}
// 실습:
console.log(validateEmail('paul-korea@naver.com')); // true
console.log(validateEmail('test.test@go.go.go')); // true
console.log(validateEmail('invalid@email')); // false
function validateEmail(email) {
const pattern = /^[\w.-]+@[\w.-]+\.\w+$/;
return pattern.test(email);
}
// 실습:
console.log(validateEmail('paul-korea@naver.com')); // true
console.log(validateEmail('test.test@go.go.go')); // true
console.log(validateEmail('invalid@email')); // false
3.2 전화번호 형식화
function formatPhoneNumber(number) {
// 숫자만 추출
const cleaned = number.replace(/\D/g, '');
const pattern = /^(\d{3})(\d{4})(\d{4})$/;
return cleaned.replace(pattern, '$1-$2-$3');
}
// 실습:
console.log(formatPhoneNumber('01019133829')); // '010-1913-3829'
console.log(formatPhoneNumber('010 2913 3132')); // '010-2913-3132'
console.log(formatPhoneNumber('010.1913.3829')); // '010-1913-3829'
function formatPhoneNumber(number) {
// 숫자만 추출
const cleaned = number.replace(/\D/g, '');
const pattern = /^(\d{3})(\d{4})(\d{4})$/;
return cleaned.replace(pattern, '$1-$2-$3');
}
// 실습:
console.log(formatPhoneNumber('01019133829')); // '010-1913-3829'
console.log(formatPhoneNumber('010 2913 3132')); // '010-2913-3132'
console.log(formatPhoneNumber('010.1913.3829')); // '010-1913-3829'
4. 실습 문제
4.1 기본 실습
- 주어진 텍스트에서 모든 "hello"를 찾아 대소문자 구분 없이 출력하세요.
- URL 주소에서 도메인 이름만 추출하세요.
- 괄호 안의 내용만 추출하세요.
4.2 심화 실습
// 실습 1: hello 찾기
const text = "hello Hello HELLO";
console.log(text.match(/hello/gi));
// 실습 2: URL 도메인 추출
const urls = [
"https://github.com/LiveCoronaDetector/livecod",
"github.com/LiveCoronaDetector/livecod"
];
// 실습 3: 괄호 내용 추출
const text2 = "hello (hello world) hello";
console.log(text2.match(/\((.*?)\)/g));
// 실습 1: hello 찾기
const text = "hello Hello HELLO";
console.log(text.match(/hello/gi));
// 실습 2: URL 도메인 추출
const urls = [
"https://github.com/LiveCoronaDetector/livecod",
"github.com/LiveCoronaDetector/livecod"
];
// 실습 3: 괄호 내용 추출
const text2 = "hello (hello world) hello";
console.log(text2.match(/\((.*?)\)/g));