정규표현식(Regular Expression)
특정한 규칙을 가진 문자열의 집합을 표현하는 형식 언어로 정규표현식을 이용하여 입력된 문자열에 대한
특정 조건 검색, 일치여부 판단, 치환 등에 대한 조건문을 간단히 처리할 수 있다.(유효성 검사시 사용)
<참고사이트>
1. 작성한 정규표현식을 그림으로 나타내줌(사용 잘 안함) http://regexper.com
2. 정규표현식 테스트(자주 사용) http://regexr.com
3. MDN 정규표현식 안내 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
정규표현식 객체 생성 및 확인하기
1. 정규표현식 객체 생성 방법
//1
const regExp = new RegExp("정규표현식")
//2 (양쪽 슬래시 기호는 정규표현식의 리터럴 표기법)
const regExp2 = /정규표현식/
2. 문자열 패턴 확인 함수
//1. 문자열에 정규표현식과 일치하는 패턴이 있을 경우 true, 없으면 false
regExp.test("문자열")
//2. 문자열에 정규표현식과 일치하는 패턴이 있을 경우 해당 문자열을 반환, 없으면 null을 반환
regExp.exec("문자열")
확인하기 (html 생략)
document.getElementByID("check1").addEventListenr("click", function(){
// 정규표현식 객체 생성
const regEx1 = new RegExp("script")
const regEx2 = /java/
// 검사할 문자열
const str1 = "javascript 정규표현식"
const str2 = "java, html, css, js 사용중"
const str3 = "heyjava, java, java"
// 1. "string" 문자열 확인
console.log("1. regEx1.test(str1): " + regEx1.test(str1));
console.log("2. regEx1.exec(str1): " + regEx1.exec(str1));
console.log("3. regEx1.test(str2): " + regEx1.test(str2));
console.log("4. regEx1.exec(str2): " + regEx1.exec(str2));
console.log("5. regEx1.test(str3): " + regEx1.test(str3));
console.log("6. regEx1.exec(str3): " + regEx1.exec(str3));
console.log("-----")
// 2 "java" 문자열을 확인
console.log("1. regEx2.test(str1): " + regEx2.test(str1));
console.log("2. regEx2.exec(str1): " + regEx2.exec(str1));
console.log("3. regEx2.test(str2): " + regEx2.test(str2));
console.log("4. regEx2.exec(str2): " + regEx2.exec(str2));
console.log("5. regEx2.test(str3): " + regEx2.test(str3));
console.log("6. regEx2.exec(str3): " + regEx2.exec(str3));
console.log(regEx2.exec(str3))
}
정규표현식 메타문자
문자열의 패턴을 나타내는 문자
a : 문자열 내에 a라는 문자열이 존재하는지 검색
[abcd] : 문자열 내에 a, b, c, d 중 하나라도 일치하는 문자가 있는지 검색
^(캐럿) : 문자열의 시작
$(달러) : 문자열의 끝
\w (word, 단어) : 아무 글자(띄어쓰기, 특수문자, 한글 제외)
\d (digit, 숫자) : 아무 숫자(0~9)
\s (space, 공간) : 아무 공백 문자(띄어쓰기, 엔터, 탭 등)
-> 소문자/대문자 구분 중요: 대문자인 경우 Not의 뜻을 가지고 있음.
[0-9] : 0 ~ 9까지의 모든 숫자
[ㄱ-힣] : ㄱ ~ 힣까지의 한글(자음, 모음 포함)
[가-힣] : 자음+모음이 결합한 형태의 한글(단모음, 단자음 불가)
[a-z] , [A-Z] : 모든 영어의 소문자, 대문자
a{5} : a라는 문자가 5개 존재 -> aaaaa
a{2,5} : a가 2개 이상 5개 이하 -> aa, aaa, aaaa, aaaaa
a{2,} : a가 2개 이상
a{,5} : a가 5개 이하
* : 0개 이상, 0번 이상 반복 (= 있어도 되고 없어도 됨)
+ : 1개 이상, 1번 이상 반복
? : 0개 또는 한 개
. : 한 칸(개행문자 제외한 문자 하나)
확인하기
// 결과 출력용 div
const div1 = document.getElementById("div1")
// [abcd]: 문자열 내에 a, b, c, d 중 하나라도 일치하는 문자가 있는지 검색
const regEx1 = /[abcd]/
div1.innerHTML += "/[abcd]/, apple : " + regEx1.test("apple") + "<br>"
div1.innerHTML += "/[abcd]/, qwerty : " + regEx1.test("qwerty") + "<hr>"
// ^(캐럿): 문자열의 시작
const regEx2 = /^group/
div1.innerHTML += "/^group/, group100 : " + regEx2.test("group100") + "<br>"
div1.innerHTML += "/^group/, 100group : " + regEx2.test("100group") + "<hr>"
//^[abcd] : 문자열이 a, b, c, d 중 하나로 시작하는지 검색
const regEx3 = /^[abcd]/
div1.innerHTML += "/^[abcd]/, group : " + regEx3.test("group") + "<br>"
div1.innerHTML += "/^[abcd]/, car : " + regEx3.test("car") + "<br>"
div1.innerHTML += "/^[abcd]/, dark : " + regEx3.test("dark") + "<hr>"
//$(달러) : 문자열의 끝
const regEx4 = /team$/
div1.innerHTML += "/team4/, A-team : " + regEx4.test("A-team") + "<br>"
div1.innerHTML += "/team4/, team-A : " + regEx4.test("team-A") + "<hr>"
* 응용
- a~d-team이 모두 true이려면 : /[a,b,c,d]-team$/
- 시작은 영어 대문자, 끝은 숫자 : /^[A-Z][0-9]$/
- 특수문자를 제외한 문자 하나 : /^[a-zA-Z0-9ㄱ-힣]$/
🥸 실습1: 이름 유효성 검사
<조건>
1. 한글 2글자 이상 6글자 이하의 문자열
2. 단자음, 단모음 안됨
3. 유효한 경우 초록색 글씨로 "유효한 이름 형식입니다."
4. 잘못된 경우 빨간색 글씨로 "잘못된 이름 형식입니다."
<head>
<style>
.confirm {
color: green;
font-weight: bold;
}
.error {
color: red;
font-weight: bodl;
}
</style>
</head>
<body>
이름: <input id = "input1" type = "text">
<span id = "result1"></span>
</body>
const input1 = document.getElementyById("input1")
const result1 = document.getElementyById("result1")
cosnt nameTest = /^[가-힣]{2,6}$/
input1.addEventListener("keyup", function(){
if(nameTest.test(input1.value)) { // or (this.value)
result1.innerHTML = "유효한 이름입니다."
result1.classList.add("confirm")
result1.classList.remove("error")
} else {
result1.innerHTML = "잘못된 이름입니다."
result1.classList.add("error")
result1.classList.remove("confirm")
}
})
* classList(): 요소가 가진 클래스를 배열로 반환
- 요소.classList.add("클래스명") : 요소에 특정 클래스 추가
- 요소.classList.remove("클래스명") : 요소에 특정 클래서 삭제
- 요소.classList.toggle("클래스명") : 클래스에 요소가 있으면 제거, 없으면 추가
🥸 실습: 회원가입 양식 만들고 유효성 검사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="/회원가입.css">
<style>
.confirm{
color: white;
background-color: lightseagreen;
}
.error{
color: white;
background-color: lightcoral
}
</style>
</head>
<body>
<form action="/회원가입다음페이지.html" onsubmit="return validate()" method="GET">
<fieldset>
<legend>회원가입</legend>
<table height = "300px">
<tr>
<td>아이디</td>
<td><input type="text" id="idInput" autocomplete="off"></td>
<td><button>중복확인</button></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" id="pwInput"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><Input type="password" id="pwConfirm"></Input></td>
<td><span id="pwResult"></span></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="nameInput" autocomplete="off"></td>
<td><span id="nameResult"></span></td>
</tr>
<tr>
<td>성별</td>
<td>
<label>남자<input type="radio" name="gender" value="male"></label>
<label>여자<input type="radio" name="gender" value="female"></label>
</td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" id="numberInput" autocomplete="off"></td>
</tr>
</table>
<div>
<button type="reset">초기화</button>
<button type="submit">회원가입</button>
</div>
</fieldset>
</form>
<script src="/회원가입.js"></script>
</body>
</html>
/* 1. 아이디 유효성 검사
1) 영어 소문자로 시작
2) 영어 대소문자 / 숫자 / -,_ 로만 이루어진 6~14글자 사이
3) 형식이 일치할 경우 입력창 배경색이 초록색, 불일치할 경우 빨간색 */
const idInput = document.getElementById("idInput")
idInput.addEventListener("keyup", function(){
const regId = /^[a-z]([a-zA-Z0-9-_]){5,13}$/;
if(regId.test(idInput.value)){
idInput.classList.add("confirm")
idInput.classList.remove("error")
} else {
idInput.classList.add("error")
idInput.classList.remove("confirm")
}
})
/*2. 비밀번호 유효성 검사
1) 비밀번호란 미입력 후 비밀번호 확인을 입력하면 "비밀번호를 입력하세요."라는 경고창이 뜨고 비밀번호란에 focus(커서 이동)
2) 비밀번호와 비밀번호 확인에 입력된 비밀번호가 같아야 함. 불일치하면 옆에 경고문구 출력 */
const pwInput = document.getElementById("pwInput")
const pwConfirm = document.getElementById("pwConfirm")
const pwResult = document.getElementById("pwResult")
pwConfirm.addEventListener("keyup", function() {
//1. 경고창 출력
if(pwInput.value.trim().length == 0) {
alert("비밀번호를 먼저 입력하세요.")
pwConfirm.value=""
pwInput.focus()
}
//2. 비밀번호 일치 확인
if(pwInput.value == pwConfirm.value) {
pwResult.innerHTML = "비밀번호 일치"
pwResult.style.color = "lightseagreen"
} else {
pwResult.innerHTML = "비밀번호 불일치"
pwResult.style.color = "lightcoral"
}
})
/* 3. 이름 유효성 검사
- 한글 2~5글자 사이 문자열
- 형식이 일치할 경우 입력란 옆에 "정상입력", 불일치할 경우 "형식에 맞지 않습니다." 출력 */
const nameInput = document.getElementById("nameInput")
const nameResult = document.getElementById("nameResult")
nameInput.addEventListener("keyup", function(){
const regName = /^[가-힣]{2,5}$/
if(regName.test(nameInput.value)) {
nameResult.innerHTML = "정상입력"
nameResult.style.color = "lightseagreen"
} else{
nameResult.innerHTML = "2~5글자의 한글만 입력하세요."
nameResult.style.color = "lightcoral"
}
})
/* 4. 성별, 전화번호 유효성 검사
1) 성별
: 선택되지 않은 경우 "성별을 선택해주세요." 라는 경고창 출력
2) 전화번호
: 000-0000-0000 형식에 맞지 않은 경우 "전화번호 양식을 올바르게 입력하세요." 라는 경고창 출력 */
function validate(){
// 1. 성별 : 체크된 라디오만 얻어오기
const gender = document.querySelector("input[name='gender']:checked")
if(gender == null) {
alert("성별을 선택하세요.")
return false;
// return false 가 없는 경우 성별이 선택되지 않아도 전송 후 다음 창으로 넘어가고
// 성별을 선택했지만 밑의 전화번호 형식이 틀렸을 경우에도 성별 경고창이 또 뜨게 된다.
// 꼭 submit의 기본 이벤트를 제거해주어야 한다.
}
// 2. 전화번호
const numberInput = document.getElementById("numberInput")
const regNumber = /^[0][0-9]{1,2}-[0-9]{3,4}-[0-9]{4}$/
if(!regNumber.test(numberInput.value)) {
alert("전화번호를 형식이 올바르지 않습니다.")
return false;
}
}
'JS > JavaScript' 카테고리의 다른 글
| 8. 배열 (0) | 2023.03.01 |
|---|---|
| 7. 형변환, 비교연산자, 문자열/숫자 내장함수 (0) | 2023.03.01 |
| 5. 이벤트 (0) | 2023.02.25 |
| 4. 변수와 자료형 (0) | 2023.02.25 |
| 3. 요소 접근 방법 (1) | 2023.02.24 |
