🎈 정규표현식이란?
특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는'형식언어'이다.- 정규표현식은 많은 텍스트 편집기와 프로그래밍 언어에서
'문자열의 검색과 치환'을 위해 지원하고 있다.
🎈 자바스크립트에서 정규표현식을 사용하는 방법
let legex = /정규표현식/; if(legex.test("검사 할 문자열")){ }
자바스크립트는 정규표현식을슬래시( / )로 감싸서 표현- legex 변수는
객체 형태가 되고, 내장하고 있는test()메서드를 통해
문자열이 그 식에부합할 경우 true,그렇지 않을 경우 false를 리턴 - 보통 if문에서 조건에 부합하지 않을 경우를 다루기 때문에,
if(!legex.test("검사 할 문자열")){ }
!legex.test("검사 할 문자열")처럼리턴값이 false일 경우에!으로
부정하여 if문을 태운다.
🎈 자바스크립트에서의 정규표현식 종류
- 숫자 모양에 대한 형식 검사
/^[0-9]*$/
- 영문으로만 구성되었는지에 대한 형식 검사
/^[a-zA-Z]*$/
- 한글로만 구성되었는지에 대한 형식 검사
/^[ㄱ-ㅎ가-힣]*$/
- 영문과 숫자로만 구성되었는지에 대한 형식 검사
/^[a-zA-Z0-9]*$/
- 한글과 숫자로만 구성되었는지에 대한 형식 검사
/^[ㄱ-ㅎ가-힣0-9]*$/
- 이메일 형식인지에 대한 검사. 아이디@도메인의 형식을 충족해야 한다.
/^([\w-]+(?:.[\w-]+))@((?:[\w-]+.)\w[\w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/
- '-'없이 핸드폰번호인지에 대한 형식검사.
/^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/
- '-'없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다.
/^\d{2,3}\d{3,4}\d{4}$/
- '-'없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사
/^\d{6}[1-4]\d{6}/
🎈 자바스크립트에서 정규표현식을 사용하는 예시 HTML
<body> <form id="myform" > <div> <label for='username'>사용자이름</label> <input type='text' name='username' id='username' placeholder='한글만 입력' /> </div> <div> <label for='userpass'>나이</label> <input type='text' name='age' id='age' placeholder='숫자만 입력' /> </div> <div> <label for='userpass'>아이디</label> <input type='text' name='userid' id='userid' placeholder='영어+숫자,최대20자' /> </div> <button type="submit">입력값 확인</button> </form>
🎈 자바스크립트에서 정규표현식을 사용하는 예시 jquery
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $("#myform").on('submit', function(e){ e.preventDefault(); //이름 let name = $("#username").val(); let nameRegex = /^[ㄱ-ㅎ가-힣]*$/; //이름을 입력하지 않았을 경우 if(!name){ alert("이름을 입력하세요"); return false; } //이름이 한글로만 입력되었는지 확인 if(!nameRegex.test(name)){ alert("이름은 한글로만 입력 가능합니다."); return false; } //나이 let age = $("#age").val(); let ageRegex = /^[0-9]*$/; //나이를 입력하지 않았을 경우 if(!age){ alert("나이를 입력해주세요"); return false; } //나이가 숫자로만 입력되었는지 확인 if(!ageRegex.test(age)){ alert("나이는 숫자만 입력해주세요"); return false; } //아이디 let id = $("#userid").val(); let idRegex = /^[a-zA-Z0-9]*$/; //아이디를 입력하지 않았을 경우 if(!id){ alert("id를 입력해주세요"); return false; } //아이디의 길이가 20을 넘겼을 경우 if(id.length > 20){ alert("id는 최대 20자만 가능합니다."); return false; } //아이디가 영어와 숫자로만 입력되었는지 확인 if(!idRegex.test(id)){ alert("아이디는 영어와 숫자로만 입력해주세요"); return false; } });
웹 개발자 공부 중