정규 표현식(Regular Expression)
- 문자열의 패턴을 정의하는 객체
- 문자열 검색이나 가공에 사용
- 원래는 Perl에서 시작되었지만 지금은 거의 모든 언어에서 사용
- regexp 로 표현하는 경우가 많습니다.
- 규칙은 단순한데 가독성은 떨어짐
1.객체 생성
1) new RegExp(패턴, 한정자)
2) /패턴/한정자
- 한정자는 생략 가능
2.정규식 메소드
1) test(): 정규 표현식과 일치하는 문자열이 포함되어 있으면 true 없으면 false 리턴
2) exec(): 정규 표현식과 일치하는 문자열을 리턴
<script>
var msg = "안녕하세요 반갑습니다11 ";
//msg에 숫자가 포함되어 있는지 확인
var reg = /[0-9]/; //정규식 패턴을 생성
if (reg.test(msg)) { //msg에 reg의 패턴이 존재하면
console.log("숫자가 포함되어 있습니다.");
} else {
console.log("숫자가 포함되어 있지 않습니다");
}
</script>
3.String 객체의 정규식 관련 메소드
- match(정규식): 정규식과 일치하는 부분을 리턴
- replace(정규식, 대체문자열): 정규식을 대체문자열로 치환
- 대체문자열 자리에 $& 를 설정하면 원래 문자열
- search(정규식): 정규식이 나오는 부분의 위치를 리턴
- split(정규식): 정규식을 기준으로 분할해서 배열로 리턴하는 함수
msg = "문재인을 문재인이 안녕하세요"
//정규식을 기준으로 분할해서 배열로 리턴
var result = msg.split(/문재인/) //정규식 패턴을 생성
for (i in result) {
documnet.write(result[i] + "</br/>");
}
// 처음 만나는 문재인은 삭제, 아무것도 없는 글자와 치환
result = mag.replace(/문재인/, "")
document.write(resulte + "<br/>");
4.한정자(제한자, 플래그)
i: 대소문자 구분하지 않고g: 끝까지 반복 수행m: 여러 줄일 때 사용/패턴/한정자
- 한정자는 여러 개 사용 가능
5.앵커문자
^: 패턴 앞에 붙이면 패턴으로 시작하는$: 패턴 뒤에 붙이면 패턴으로 끝나는
6.메타문자
.: 아무글자1개[문자나열]: 문자 중 1개[abc] abc중에서 1개[^문자나열]: 나열된 문자를 제외하고[문자1-문자2]: 문자1에서 문자2 사이[가-힣]: 한글 1자[0-9]: 숫자 1개[0-9a-zA-Z]: 숫자나 영문 1글자\d: 숫자\D: 숫자가 아닌\w:단어\W: 단어가 아닌\s: 공백문자(공백, 탭, 엔터 등)\S: 공백문자가 아닌
7.수량문자
A+: 1개 이상A*: 0개 이상A?: 0개 또는 1개A{2}: 2개 이상A{2,5}: 2-5개A{2,}: 2개 이상
8.자주 사용되는 패턴들(email, 비밀번호, 전화번호 등)은 인터넷에 검색해도 됩니다.
정규식은 유효성 검사나 텍스트 가공에 많이 사용
이메일과 비밀번호가 패턴에 맞지 않으면 서버로 전송하지 않도록 하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 브라우저에서의 유효성 검사</title>
<script>
window.addEventListener("load", function(e){
//body 태그 안에서 필요한 객체 찾아오기 - id를 이용해서 찾아오기
var myform = document.getElementById("myform");
var errordiv = document.getElementById("errordiv");
var email = document.getElementById("email");
var pw = document.getElementById("pw");
//이메일 정규식을 생성
var emailreg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
//비밀번호 정규식을 생성
var pwreg = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
//폼의 전송 이벤트가 발생하면 유효성 검사를 수행
myform.addEventListener("submit", function(e){
//email 란에 입력된 문자열에 emailreg가 포함되지 않았다면
if(emailreg.test(email.value) == false){
//에러 메시지 출력
errordiv.innerHTML = "이메일 입력 형식이 잘못되었습니다.";
errordiv.style.color = "red";
//포커스 이동
email.focus();
//기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음
var evt = window.event || e;
evt.preventDefault();
return;
}
if(pwreg.test(pw.value) == false){
//에러 메시지 출력
errordiv.innerHTML = "비밀번호 입력 형식이 잘못되었습니다.";
errordiv.style.color = "red";
//포커스 이동
pw.focus();
//기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음
var evt = window.event || e;
evt.preventDefault();
return;
}
});
});
try{
//이 문장에서 예외가 발생하면 멈추지 않고 catch 구문으로 이동하기 때문에 멈추지 않습니다.
var ar = new Array(4300000000);
}catch(e){
console.log("배열 생성에 실패했습니다.")
}
alert("여기까지 수행")
</script>
</head>
<body>
<form action="server.jsp" id="myform">
<div id="errordiv"></div>
<label for="email">이메일</label>
<input type="text" size="40" id="email" name="email"/><br/>
<label for="pw">비밀번호</label>
<input type="password" size="20" id="pw" name="pw"/><br />
<label for="name">이름</label>
<input type="name" size="15" id="name" name="name"/><br/>
<input type="submit" value="전송"/>
</form>
<script>
</script>
</body>
</html>