그럼에도 불구하고

👨‍💻

정규 표현식으로 특정 문자 검색하기 본문

JavaScript/Function implementation

정규 표현식으로 특정 문자 검색하기

zenghyun 2022. 12. 28. 13:08

오늘은 정규 표현식으로 특정 문자를 검색해 보자

 

 

 

[ 정규 표현 패턴의 표기 ]

 

문자열의 패턴은 내용의 앞뒤에 /를 삽입한다.

 

/패턴/

 

대표적인 패턴

 

패턴 의미
x 문자 x
xyz 문자열 xyz
[xyz] x, y, z 중 하나의 문자
[a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능
[^xyz] x, y, z 외 하나의 문자
[^a-z] a ~ z 외 하나의 문자
abc|xyz 문자열 abc 혹은 xyz
{숫자} 반복 횟수
^x 시작 문자 x
x$ 종료 문자 x
. 하나의 문자(줄바꿈 코드 제외)
x* 0개 이상 계속되는 x*
\ 다음에 오는 문자를 이스케이프(escape) 처리
\d 숫자 [0-9]
\D 숫자가 아닌 문자 [^0~9]
\w 영문, 숫자, 언더바 [A-Za-z0-9_]
\s 공백 문자(스페이스, 탭, 줄바꿈 등)
\S 공백 문자 이외의 문자 [^/s]
\t 수평 탭
\n 줄바꿈 코드 

 

조건 

 

1. 전화번호에 하이픈(-) 포함되면 공백 (' ')으로 변환시킨다.

2. 0으로 시작하는 10자리 혹은 11자리의 번호 형식이 맞는지 체크하여 그에 맞는 text를 출력해 준다. 

   - 0으로 시작하지 않으면 경고 표시 

   - 0으로 시작하고, 10자리 혹은 11자리의 번호가 아니라면 경고 표시

 

 

 

<!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>Document</title>
  <style>
    form { width: 500px; height: 300px;
      box-sizing: border-box;
      border: 1px solid black;
      padding: 20px;
      margin: 20px auto;
    }
    #warningMessage { color:red; 
    font-size: 1em;}
  </style>
</head>
<body>
  <form action="">
    <h1>입력폼</h1>
    <h3>전화번호를 입력해주세요</h3>
    <input type="tel" placeholder="전화번호" id="phoneNumberText">
    <p id="warningMessage"></p>
  </form>

  <script>
    const phoneNumberText = document.querySelector('#phoneNumberText');

    const warningMessage = document.querySelector('#warningMessage');

phoneNumberText.addEventListener('keyup', () => {
  // 입력된 전화번호
  const phoneNumber = phoneNumberText.value;

      const trimmedPhoneNumber = phoneNumber.replace(/-/g, ''); // 09012345678

       // 0으로 시작하는 10자리 혹은 11자리의 번호 형식 체크
  if (/^[0][0-9]{9,10}$/.test(trimmedPhoneNumber) === false) {
    warningMessage.innerText = '전화번호의 형식에 맞춰 입력해 주세요.';
  } else {
    warningMessage.innerText = '';
  }
    });
  </script>
</body>
</html>

 

 

결과:

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

'JavaScript > Function implementation' 카테고리의 다른 글

이미지 갤러리 (라이트 박스) 만들기  (0) 2022.12.30
숫자 반환하기  (0) 2022.12.29
지역 검색 구현하기  (1) 2022.12.24
제곱 함수 구하기  (0) 2022.12.19
day / night mode ver_2  (0) 2022.12.16
'JavaScript/Function implementation' Related Articles more
Comments