🚀 from error to study/Front-End
[js] 자바스크립트 정규 표현식(RegExp/Regular Expression)
천재강쥐
2024. 6. 5. 22:31
🔥 포스팅 계기
자바스크립트의 정규식과 예시, 자주 사용하는 규칙을 알아보자
📍 정규 표현식(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,''));
}
}