https://www.youtube.com/watch?v=CjoDIgDOHA4
해당 영상을 시청하고, 영상에서 다루어진 내용을 기반으로 정리해보았다.
1. 정규 표현식
1) 개요
특정 패턴을 가지고, 문자열을 찾을 수 있는 검색패턴으로 정의된다.
이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다.
쉽게 이해를 하기 위해 만일 전화번호를 입력받는 로직을 구현한다는 가정을 세워보자.
유효성 검증 요구사항을 충족하기 위해서는 앞자리는 무조건 010이 사용되어야하고, 하이픈(-)이 쓰여야하며, 뒤의 두 단락은 4자리로 구성되어야한다.
만일 정규표현식을 사용하지 않고, 유효성을 충족하기 위해서는 다수의 if문이 사용될 것이며, 해당 예시가 아닌, 실제로 사용될때는 생각보다 더 방대한 수의 if문이 중첩될지도 모른다. 이때, 정규 표현식을 사용하면 if문을 다수로 사용하지 않고 간단하게 유효성 검증을 해결할 수 있다.
정규 표현식은 메타문자, 수량자, 그룹화 등의 기능들을 활용하여 다양하게 작성할 수 있다.
2) 사용 방법
정규 표현식 = /패턴/패턴변경자
해당 표현식의 유효성 검사는 일반적으로 Match메서드와 함께 사용된다.
예시는 다음과 같다.
email = prompt('이메일 입력');
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; // 정규식
if(email.match(regExp) != null){
console.log('통과!');
}
else{
console.log('다시 입력하세요.');
}
① 패턴
패턴은 메타문자와 수량자로 구성되어있으며, 원하는대로 조합하여 사용할 수 있다.
⑴ 메타문자
문자를 나타내는 문자
표시 | 내용 |
. | 모든 문자 |
[ ] | 대괄호 안에 들어가있는 문자를 찾을때, 대괄호 안에서 ^는 not을 의미 |
| | or |
\s | 공백 |
\d | [0~9] |
\w | 영문자, 숫자 밑줄[0-9a-zA-Z_] |
⑵ 수량자
앞 문자(메타문자)의 개수
표시 | 내용 |
? | - 앞 문자가 없거나 하나 있음( [0, 1] ) - 처음에 발견했을때 쉬고 다시 찾음 |
+ | 앞 문자가 하나 이상( [1, ] ) |
* | 앞 문자가 0개 이상( [0, ] ) |
{n, m} | 앞 문자가 n개 이상, m개 이하 |
{n, } | 앞 문자가 n개 이상, 위의 형태에서 m이 생략된 형태 |
{n} | 앞 문자가 n개 |
* 위치문자 *
^a : 단어의 맨 앞에 위치한 해당 패턴만을 검색함. (ex : 'a'로 시작하는 단어의 'a'만을 검색함.)
a$ : 단어의 맨 뒤에 위치한 해당 패턴만을 검색함. (ex : 'a'로 끝나는 단어의 'a'만을 검색함.)
/^정규식$/ : 지정한 패턴에 완전히 부합하는 텍스트만을 검색한다는 의미이다.
이처럼 정규표현식을 분석할때는 메타문자와 수량자를 잘 파악할 필요가 있다.
② 패턴 변경자(flag)
정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다. 이렇게 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.
패턴 변경자 | 설명 |
i | 검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정함. |
g | 검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정함. |
m | 검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정함. |
y | 대상 문자열의 현재 위치부터 비교를 시작하도록 설정함. |
3) 정규 표현식 사용의 장단점
장점 : 패턴으로 검증이 가능하다. if문의 사용을 최소화 할 수 있다.
단점 : 가독성이 좋지 않으며, 유지보수가 어려울 수 있다.
때문에 간단한 검증일때는 if문으로 해결하여, 메서드 명을 통해 가독성을 높이는 방법이 좋을것이고, 복잡한 검증이 있을때는 정규표현식을 사용하여, 주석을 달아 가독성을 높이는 방법이 가장 효율적이라는 것이다.
'영상리뷰' 카테고리의 다른 글
[우아한테크] 곤이 : DOM&BOM (0) | 2022.02.16 |
---|---|
[우아한테크] 신세한탄 : CSR & SSR (0) | 2022.02.14 |
[우아한테크] 그루밍 : 상태관리와 반응형 프로그래밍 (0) | 2022.02.13 |
[우아한테크] 동동 : CSS 방법론 (0) | 2022.02.12 |
[우아한테크] 브랜 : Component (0) | 2022.02.11 |