
1. 정규 표현식
정규 표현식이란 특정 문자열 패턴을 정의하는 문자열로 이메일 주소, 비밀 번호, 전화 번호, 아이디 등 특정 형식의 날짜 등을 검증할 때 사용하는 표현식 입니다. 정규 표현식의 기호는 다음과 같습니다.
- , : 임의의 한 문자
- * : 0개 이상의 반복
- + : 1개 이상의 반복
- ? : 0개 또는 1개의 반복
- ^ : 문자열의 시작
- $ : 문자열의 끝
- [ ] : 문자 클래스 (ex. [abc]는 'a', 'b', 'c' 중 하나)
- | 또는 (OR) 연산자
- ( ): 그룹화
2. 정규 표현식 생성하기
정규 표현식은 두 가지 방법으로 생성할 수 있으며, 리터럴 표기법, RegExp를 사용해 표현할 수 있습니다.
- 리터럴 표기법:
const regex = /pattern/;
- RegEXP 객체 사용:
const regex = new RegExp("pattern");
3. 주요 메서드
- test(): 문자열이 정규 표현식에 매치되는지 확인
// test()
const test_regex = /abc/;
console.log(test_regex.test("abcdsa")); // true
- exec(): 매치되는 결과를 배열로 반환
const exec_regex = /abc/;
console.log(exec_regex.exec("abcdef")); // ['abc']
- String.prototype.match(): 문자열에서 정규 표현식과 매치되는 부분을 찾음
const matchstr = "abcdef";
console.log(matchstr.match(/abc/)); // ['abc']
- String.prototype.replace(): 매치되는 부분을 다른 문자열로 대체
const replacestr = "abcdef";
console.log(replacestr.replace(/abc/, "xyz")); // 'xyzdef'
- String.prototype.split(): 정규 표현식을 기준으로 문자열을 분리
const str = "a,b,c";
console.log(str.split(/,/)); // ['a', 'b', 'c']
4. 패턴 예제
- 이메일 주소 검증:
// 이메일 주소 검증
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test("example@example.com")); // true
console.log(emailRegex.test("exampleexample.com")); // false
- 전화번호 검증:
// 전화번호 검증 (형식 123-4560-7890)
const phoneRegex = /^\d{3}-\d{4}-\d{4}$/;
console.log(phoneRegex.test("123-4567-8910")); // true
console.log(phoneRegex.test("1232-4567-8910")); // false
- URL 검증:
// URL 검증
const urlRegex = /^(https?:\/\/)?([a-z0-9.-]+)(:[0-9]+)?(\/[^\s]*)?$/i;
console.log(urlRegex.test("https://example.com")); // true
5. 플래그(Flags)
정규 표현식은 여러 플래그를 사용할 수 있습니다.
- i : 대소문자 구분 없음
- g : 전역 검색 (모든 매치 반환)
- m : 다중 행 모드 (줄 바꿈 기준)
const regex = /abc/i; // 대소문자 구분 없음
console.log(regex.test("AbCde")); // true
const globalRegex = /abc/g;
const str = "abc abc abc";
console.log(str.match(globalRegex)); // ['abc', 'abc', 'abc']
7. 유용한 정규 표현식
- 숫자 검증: ^\d+$
- 영문자 검증: ^[a-zA-Z]+$
- 특수 문자 포함 검증: ^[^a-zA-Z0-9]+$
- 공백 제거: ^\s+|\s+$
GitHub - Koras02/javascript-regex
Contribute to Koras02/javascript-regex development by creating an account on GitHub.
github.com
LIST
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 2. 탐색 알고리즘 (0) | 2025.03.06 |
---|---|
[JavaScript] 1. 정렬 알고리즘 (0) | 2025.03.04 |
[Javascript] Jest란 ? (0) | 2025.02.25 |
[Javascript] Javascript 호이스팅이란? (0) | 2025.02.17 |
[Javascript] 슬라이드 구현하기 (0) | 2025.02.16 |