🍦Vanilla JS (9) 정규 표현식

정규 표현식(regExp)

• 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴 입니다.

기본 형태

const regexp = /World/;
const regexp = new RegExp("World");

예제

let str = "Hello World! World!";
const re = /World/;
console.log(re.test(str)); // 해당 문자열의 포함 여부 확인
console.log(str.search(re)); // 해당 문자열의 시작 위치 반환

exec() : 패턴과 일치하는 문자열 반환

• 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열 반환
• 만약, 패턴과 일치하는 문자열이 없으면 null 반환

let targetStr =
  "가장 큰 실수는 포기, 가장 어리석은 일은 남의 결정 찾기, 가장 좋은 선물은 용서";
let firstRst = /가장+/.exec(targetStr); // 패턴과 일치하는 문자열이 여러개인 경우
let secondRst = /가장큰+/.exec(targetStr);
console.log(firstRst);
console.log(`exec() : ${secondRst}`);

test() : 문자열 있으면 true, 없으면 false

• 인수로 전달된 문자열에서 특정 패턴과 일치하는 문자열이 있는지 검사
• 문자열이 있으면 true, 없으면 false 반환

let targetStr2 =
  "가장 큰 실수는 포기, 가장 어리석은 일은 남의 결정 찾기, 가장 좋은 선물은 용서";
let firstRst2 = /가장+/.test(targetStr2); // 패턴과 일치하는 문자열이 여러개인 경우
let secondRst2 = /가장큰+/.test(targetStr2);
console.log(`test() : ${firstRst2}`);
console.log(`test() : ${secondRst2}`);

전화번호 검사하기

• \d : 숫자 의미
• {} : {} 안의 숫자는 개수를 의미

let inputNum = "010-1234-5678";
const regex = /\d{3}-\d{4}-\d{4}$/;
let rst = regex.test(inputNum);
if (rst) {
  console.log("로그인 성공!");
} else console.log("로그인 실패! 핸드폰 번호에 하이픈(-)을 입력해주세요.");

match() : 전화번호 추출

• 주어진 문자열의 처음부터 패턴 매칭을 수행

const inputText = "안녕하세요. 제 번호는 010-9090-8080 입니다. 연락 주세요.";
const regex2 = /\d{3}-\d{4}-\d{4}/;
let regNumber = inputText.match(regex2);
console.log(regNumber);
console.log(regNumber[0]);

g : 전화번호 여러개 추출

• \d{2, 3} : 숫자 2~3개로 시작
• g : 매칭되는 모든 항목 찾기

const inputText2 = "안녕하세요. 제 번호는 010-3212-2323, 032-872-2142 입니다.";
const regex3 = /\d{2,3}-\d{3,4}-\d{4}/g;
let regNumber2 = inputText2.match(regex3);
// console.log(regNumber2);
// for(let i of regNumber2) console.log(i);
regNumber2.forEach((i) => console.log(i));

정규식 주요 패턴 사용 예제

const regex4 = /오늘의/; // 단순 글자 찾기
const regex5 = /010/g; // 010으로 시작되는 모든 문자열 찾기
const regex6 = /[a-zA-Z]/g; // 모든 알파벳 대소문자 찾기
const regex7 = /[^0-9]/g; // 숫자가 아닌 문자 모두 찾기
const regex8 = /[ㄱ-ㅎ가-힣]/g; // 모든 한글 찾기
const inputText3 = "Hello. 제 번호는 010-3212-2323, 032-872-2142 입니다.";
let rst2 = inputText3.match(regex8);
console.log(rst2);

웹사이트 주소 정규식 검사

• 웹사이트 주소는 http:// 혹은 https://로 시작하고, 알파벳 _ - . 으로 이루어져 있음
• /https?:\/\/[\w\-\.]+/g

const text = "구입 문의는 http://gongumarket.com https://google.com 010-2323-2312 으로 주시기 바랍니다.";
const regex9 = /https?:\/\/[\w\-\.]+/g;
let rst3 = text.match(regex9);
console.log(rst3);

---

실습예제 - 로그인 창 만들기

JavaScript

const register = document.getElementById("register");
let conFirmCnt = 0;

// 아이디 확인
let idInput = document.querySelector("#idInput");
const idBtn = document.querySelector("#idBtn");
idBtn.addEventListener("click", function() {
  const errorMsg = document.querySelector("#errorMsg1");
  const regExp = /^[a-z]+[a-z0-9]{8,20}$/g;
  let rst = regExp.test(idInput.value);
  if(rst) {
    errorMsg.style.display = 'none';
    conFirmCnt++;
    alert("확인 되었습니다.");
    document.getElementById("pwdInput").focus();
  } else {
    errorMsg.style.display = 'block';
  }
});

// 비밀번호 확인
let pwdInput = document.querySelector("#pwdInput");
const pwdBtn = document.querySelector("#pwdBtn");
pwdBtn.addEventListener("click", function() {
  const errorMsg = document.querySelector("#errorMsg2");
  const regExp = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&//(\\)\-_=+]).{8,20}$/;
  let rst = regExp.test(pwdInput.value);
  if(rst) {
    errorMsg.style.display = 'none';
    conFirmCnt++;
    alert("확인 되었습니다.");
    document.getElementById("mailInput").focus();
  } else {
    errorMsg.style.display = 'block';
  }
});

// 이메일 확인
let mailInput = document.querySelector("#mailInput");
const mailBtn = document.querySelector("#mailBtn");
mailBtn.addEventListener("click", function() {
  const errorMsg = document.querySelector("#errorMsg3");
  const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
  let rst = regExp.test(mailInput.value);
  if(rst) {
    errorMsg.style.display = 'none';
    conFirmCnt++;
    alert("확인 되었습니다.");
    document.getElementById("phoneInput").focus();
  } else {
    errorMsg.style.display = 'block';
  }
});

// 전화번호 확인
let phoneInput = document.querySelector("#phoneInput");
const phoneBtn = document.querySelector("#phoneBtn");
phoneBtn.addEventListener("click", function() {
  const errorMsg = document.querySelector("#errorMsg4");
  const regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
  let rst = regExp.test(phoneInput.value);
  if(rst) {
    errorMsg.style.display = 'none';
    conFirmCnt++;
    alert("확인 되었습니다.");
    if(conFirmCnt == 4) {
      register.disabled = false;
    }
  } else {
    errorMsg.style.display = 'block';
  }
});

function popUp() {
  window.open('230404_3_가입완료.html', "팝업", 'width=500, height=700');
}

const register2 = document.querySelector("#register");
register2.addEventListener("click", popUp);

HTML

<!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">
  <link rel="stylesheet" href="./230404_3_로그인.css">
  <title>로그인 예제</title>
</head>
<body>
  <h1>회원가입</h1>
  <form>
    <div class="container">
      <div class="item">
        <input type="text" id="idInput" placeholder="아이디 입력">
        <button id="idBtn">확인</button>
        <p id="errorMsg1">잘못 입력하셨습니다. 다시 입력해주시기 바랍니다.</p>
      </div>
      <div class="item">
        <input type="password" id="pwdInput" placeholder="비밀번호 입력">
        <button id="pwdBtn">확인</button>
        <p id="errorMsg2">잘못 입력하셨습니다. 다시 입력해주시기 바랍니다.</p>
      </div>
      <div class="item">
        <input type="text" id="mailInput" placeholder="이메일 입력">
        <button id="mailBtn">확인</button>
        <p id="errorMsg3">잘못 입력하셨습니다. 다시 입력해주시기 바랍니다.</p>
      </div>
      <div class="item">
        <input type="text" id="phoneInput" placeholder="전화번호 입력">
        <button id="phoneBtn">확인</button>
        <p id="errorMsg4">잘못 입력하셨습니다. 다시 입력해주시기 바랍니다.</p>
      </div>
      <button type="submit" id="register" disabled>가입 요청</button>
    </div>
  </form>
  <script src="./230404_3_로그인.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
}
h1 {
  text-align: center;
  margin: 10px 0;
}
body {
  width: 100%;
  margin: 0 auto;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.item > p {
  text-align: right;
  font-size: 0.8em;
  color: #ff0000;
  display: none;
}
.item > input {
  border-radius: 10px;
  border: 1px solid #696969;
  width: 200px;
  height: 40px;
}
.item > button {
  border-radius: 10px;
  border: 1px solid #696969;
  width: 60px;
  height: 40px;
  background-color: #E5F0FF
}
#register {
  border-radius: 10px;
  border: 1px solid #696969;
  width: 260px;
  height: 40px;
}

잘되던 코드가 갑자기 왜 안되나 했더니 form태그는 기본적으로 submit 속성이 있어서 입력한 값이 다 사라져서 그런거였다.
수업 시간에 prevent 걸어줘야 한다고 했는데 그새 까먹은 ^^;;; javascript 코드 다시 수정..

🔥수정 사항

pwdBtn.addEventListener("click", function(e) {
    e.preventDefault();