📅 날짜: 2025-02-19
📚 학습 내용
🔹 6. 정규표현식(Regex) 활용
📌 개념 정리
정규표현식(Regex)은 문자열 패턴을 검색하거나 검사할 때 사용하는 강력한 도구이다.
test(): 문자열이 특정 패턴을 포함하는지 검사 (true/false 반환)match(): 패턴에 일치하는 값을 배열로 반환replace(): 특정 패턴을 다른 값으로 변경- 패스워드 유효성 검사 : 최소 8자 이상, 영문 + 숫자 + 특수문자 포함
- 사용자 입력 검증 : 첫 글자가 숫자인지 검사
📌 코드 원본 (설명 포함)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex Validation</title>
</head>
<body>
<input type="text" class="input" placeholder="문자열 입력">
<button class="btn">검사</button>
<p class="result"></p>
<script>
// ✅ 1. 요소 선택
const inputEl = document.querySelector('.input'); // 입력 필드
const btnEl = document.querySelector('.btn'); // 검사 버튼
const resultEl = document.querySelector('.result'); // 결과 표시
// ✅ 2. 버튼 클릭 시 정규표현식 검사 실행
btnEl.addEventListener('click', () => {
const text = inputEl.value.trim(); // 입력값 가져오기 (공백 제거)
if (text === '') {
alert("문자열을 입력하세요!");
return;
}
checkRegex(text); // 정규표현식 검사 함수 호출
});
// ✅ 3. 정규표현식 검사 함수
function checkRegex(text) {
const regex1 = /^[0-9]/; // 첫 글자가 숫자인지 확인
const regex2 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/; // 비밀번호 유효성 검사 (최소 8자, 영문 + 숫자 + 특수문자 포함)
let message = '';
if (regex1.test(text)) {
message += "🚨 첫 글자가 숫자로 시작하면 안됩니다.<br>";
} else {
message += "✅ 첫 글자 규칙 통과!<br>";
}
if (regex2.test(text)) {
message += "✅ 비밀번호 유효성 검사 통과!";
} else {
message += "🚨 비밀번호는 최소 8자 이상, 영문 + 숫자 + 특수문자를 포함해야 합니다.";
}
resultEl.innerHTML = message; // 결과 표시
}
</script>
</body>
</html>📌 코드 실행 흐름 분석
1️⃣ 입력 필드, 버튼, 결과 요소 선택
const inputEl = document.querySelector('.input');
const btnEl = document.querySelector('.btn');
const resultEl = document.querySelector('.result'); ✅ querySelector()를 사용하여 HTML 요소들을 변수에 저장
2️⃣ 버튼 클릭 시 이벤트 추가
btnEl.addEventListener('click', () => {
const text = inputEl.value.trim();
if (text === '') {
alert("문자열을 입력하세요!");
return;
}
checkRegex(text);
});✅ addEventListener('click', callback)을 사용하여 버튼 클릭 시 정규표현식 검사 실행
🚀 입력값을 가져와 공백 제거 후 유효성 검사 진행
3️⃣ 정규표현식 검사 (checkRegex())
function checkRegex(text) {
const regex1 = /^[0-9]/;
const regex2 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/; ✅ 첫 번째 정규식 : regex1 = /^[0-9]/
- 문자열이 숫자로 시작하는지 검사
✅ 두 번째 정규식 : regex2 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/
- 비밀번호 유효성 검사 (최소 8자 이상, 영문 + 숫자 + 특수문자 포함)
4️⃣ 검사 결과 출력
let message = '';
if (regex1.test(text)) {
message += "🚨 첫 글자가 숫자로 시작하면 안됩니다.<br>";
} else {
message += "✅ 첫 글자 규칙 통과!<br>";
}
if (regex2.test(text)) {
message += "✅ 비밀번호 유효성 검사 통과!";
} else {
message += "🚨 비밀번호는 최소 8자 이상, 영문 + 숫자 + 특수문자를 포함해야 합니다.";
}
resultEl.innerHTML = message;✅ regex1.test(text) → 첫 글자가 숫자인지 검사
✅ regex2.test(text) → 비밀번호 규칙 검사
🚀 검사 결과를 <p> 요소에 출력하여 사용자에게 보여줌
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| 정규표현식 패턴 검사 | test() 사용 (regex.test(text)) |
| 비밀번호 유효성 검사 | 영문 + 숫자 + 특수문자 포함 (최소 8자) |
| 첫 글자 숫자 체크 | /^[0-9]/ 사용 |
| 결과 출력 | innerHTML을 활용해 결과 표시 |
Here, My Pale Blue.🌏