🔥 포스팅 계기
자바스크립트의 정규식과 예시, 자주 사용하는 규칙을 알아보자
📍 정규 표현식(RegExp/Regular Expression)이란?
👉🏻 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식
📍 정규 표현식 플래그
플래그 | 의미 |
g | 발생할 모든 pattern에 대한 전역 검색 |
i | 대/소문자 구분 안 함 |
m | Multi line(여러 행)의 문자열에 대해 검색 |
✔️ 즉 gi를 함께 쓸 경우, 특정 문자열 전체를 보고 대/소문자를 구분하지 않겠다는 뜻이 됨
📍 정규 표현식 매칭 패턴
👉🏻 문자/숫자/기호 표시
패턴 | 의미 |
a-zA-Z | 영어 알파벳 (-으로 범위 지정) |
ㄱ-ㅎ가-힣 | 한글 문자(-으로 범위 지정) |
0-9 | 숫자(-으로 범위 지정) |
. | 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두 포함) 단, 줄바꿈은 포함되지 않음 |
\d | 숫자 |
\D | 숫자가 아닌 것 |
\w | 영어 알파벳, 숫자, 언더바(_) |
\W | \w가 아닌 것 |
\s | space 공백 |
\S | space 공백이 아닌 것 |
\특수기호 | 특수기호 |
📍 정규 표현식 검색 패턴
👉🏻 AND, OR, startWith, EndWith의 조합 가능
패턴 | 의미 |
| | OR |
[] | 괄호 안 문자들 중 하나 |
[^문자] | 괄호 안의 문자를 제외한 것 |
^문자열 | 특정 문자열로 시작(괄호 없음) |
문자열$ | 특정 문자열로 끝남 |
() | 그룹 검색 및 분류(match 메소드에서 그룹별로 묶어 줌) |
(?: 패턴) | 그룹 검색(분류X) |
\b | 단어의 처음/끝 |
\B | 단어의 처음/끝이 아님 |
📍 정규 표현식 수량 패턴
👉🏻 특정 패턴이 몇 번 반복되는지 필터링
패턴 | 의미 |
? | 최대 한 번(없거나 한 개) |
* | 없어가 있거나 여러 개 포함 |
+ | 최소 한 개 |
{n} | n개 |
{Min,} | 최소 Min개 이상 |
{Min, Max} | 최소 Min개 이상, 최대 Max 이하 |
📍 정규 표현식 주요 메소드
👉🏻자바스크립트 메소드를 통해 패턴 검사, 매칭 문자열 추출/반환
메소드 | 의미 |
("문자열").match(/정규표현식/플래그) | 문자열에서 정규 표현식에 매칭되는 항목들을 배열로 반환 |
("문자열").replace(/정규표현식/, "대체 문자열") | 정규 표현식에 매칭되는 항목을 대체 문자열로 반환 |
("문자열").split(정규표현식) | 문자열을 정규 표현식에 매칭되는 항목으로 쪼개어 배열로 반환 |
(정규표현식).test("문자열") | 문자열이 정규 표현식과 매칭되면 true, 아니면 false 반환 |
(정규표현식).exec("문자열") | match 메소드와 유사 (단, 무조건 첫 번째 매칭 결과만 반환) |
📍 숫자와 영문만 작성하도록 만들기 위한 정규식
👉🏻 /[^0-9a-zA-Z]/gi
👉🏻 실제 사용 코드 예시
onKeyUpCallback={(e: any) => {
e.target.value = e.target.value.replace(/[^0-9a-zA-Z]/gi, '');
}}
📍 특수문자를 사용하지 못하게 하는 정규식
👉🏻 /[~!@\#$%^*\()\=+'\{\}\[\]\\\\\/\?\"\|\<\>\,\`\:\;]/gi
👉🏻 실제 사용 코드 예시
validateTextValue : function (me, type){
var re = null;
if(type == 'NOSPECIALSYMBOL') re = /[~!@\#$%^*\()\=+'\{\}\[\]\\\\\/\?\"\|\<\>\,\`\:\;]/gi;
var temp = me.val();
if(re.test(temp)){
me.val(temp.replace(re,''));
}
}
📍 영문, 숫자만 사용 가능하게 하는 정규식(= 특수문자,한글을 사용하지 못하게 하는 정규식)
👉🏻 /[~!@\#$%^*\()\=+'\{\}\[\]\\\\\/\?\"\|\<\>\,\`\:\;]/gi
👉🏻 실제 사용 코드 예시
validateTextValue : function (me, type){
var re = null;
if(type == 'ENGLISHNUMBER') re = /[~!@\#$%^&*\()\=+'\{\}\[\]\\\\\/\?\"\|\<\>\,\`\:\;\-\_\.ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/gi;
var temp = me.val();
if(re.test(temp)){
me.val(temp.replace(re,''));
}
}