JavaScript 11. 정규표현식

정규표현식 (REGEX | REGEP : Regular Expression)

특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환) 할때 사용하는 형식 언어 
정규 표현식을 이용하면 문자열에 대한 특정 패턴 조건 검사시 복잡한 조건을 제시할 필요없이 간단해짐 

-> 주로 회원가입 페이지 등에서 이용 

 

정규표현식 객체 생성 및 정규표현식과 관련된 메소드 

1. 정규표현식 객체생성 = 정규식 변수를 선언 : 검색조건으로 삼고자하는 문자열 또는 특정패턴 만들어두기 

 방법1)  const regExp = new RegExp("문자열");
 방법2) const regExp2 = /문자열/;

2. 정규표현식 관련 메소드 

 * RegExp 객체에서 제공하는 메소드 (정규식.xxx(문자열))
  - 정규식.test(문자열) : 문자열에서 정규식 값과 일치하는 게 있을 경우 true / 아니면 false 반환 
  - 정규식.exex(문자열) : 문자열에서 정규식값과 일치하는 게 있을 경우 처음 매칭된 문자열을 반환 / 없으면 null반환 

* String 객체에서 제공하는 메소드 (문자열.xxx(정규식))
 - 문자열.match(정규식) : 문자열에서 정규식값과 일치하는 값을 찾아서 반환
 - 문자열.search(정규식) : 문자열에서 정규식값과 일치하는 값의 시작인덱스 반환
 - 문자열.replace(정규식, 바꿀값) : 문자열에서 정규식 값과 일치하는 첫번째 부분을 바꿀값으로 변경
 - 문자열. split(정규식) : 정규식에 지정된 값을 구분자로해서 쪼개진 값들을 배열로 반환

---

메타문자

: 메타문자를 이용해서 정규식으로 검색조건으로 삼을 "특정패턴"을 제시 가능 

1. ^ : 시작을 의미 
2. [] : []내에 여러문자들을 목록처럼 나열가능(목록내 하나라도 있으면 true)
3. $ : 끝을 의미
4. . : 개행문자를 제외한 모든 문자(영문자,숫자,한글,특수문자) 한글자 
5. + : 한글자 이상 (0글자X)
   .+ : 개행문자를 제외한 모든 문자들이 한글자 이상인 경우 

---

플래그 문자

: 플래그 문자는 객체생성문 /    / 뒤에 기술 

1. i : 대소문자를 가리지 않고 비교를 수행
2. g : 전역으로 비교를 수행
3. m :  여러줄 비교를 수행 

---

 정규표현식의 기타 표현식

 \d : 숫자(즉, [0-9]와 동일)
\D : 숫자를 제외한 모든 문자

\w : 영문자, 숫자, _
\W : 영문자, 숫자, _ 를 제외한 모든 문자 

\s : 공백문자(띄어쓰기, 탭, 줄바꿈)
\S : 공백문자를 제외한 모든 문자 

< 수량문자>

+ : 1글자 이상( 1글자는 반드시 있어야함)
* : 0글자 이상(0글자도 가능하다는 소리)
? : 0글자 또는 1글자 (다수 불가능함)

{5} : 5글자
{2,5} : 2글자 이상 5글자 이하 
{2, } : 2글자 이상
{ ,5} : 5글자 이하 (최대 5글자)

---

예제) 

 1.  프롬프트에 입력한 값이 영문자( 소문자, 대문자) 또는 숫자로만 이뤄져야하고 첫글자는 반드시 영문자여야함

 <button onclick="test3();">i실행확인</button>
  <script>
        function test3(){
            // 영문자(소문자, 대문자)또는 숫자로만 이뤄져야됨 
            // 단, 첫글자는 반드시 영문자여야만함 

            let regExp = /^[a-z][a-z0-9]+$/i; 
            
            const value = prompt("입력하시오");
            if(regExp.test(value)){
                alert("제대로 입력하셨습니다.");
            }else{
                alert("유효한 형식이 아니에요!");
            }
        }
  </script>

 

2.  아래의 문자열에 있는 a를 대소문자 가리지않고 모두 찾아 "(***)"로 치환하기(콘솔창확인) 

    "JavaScript jQuery Ajax"

 

<button onclick="test4();">g실행확인</button>
<script>
function test4(){
            const str = "JavaScript jQuery Ajax";
            let regExp = /a/g; //전역으로 다 찾아져서 치환됨 

            console.log(regExp, str.replace(regExp,"(***)"));//'J(***)v(***)Script jQuery Aj(***)x'

            regExp = /a/ig; //대소문자가리지않고 전역으로 찾아서 치환
            console.log(regExp, str.replace(regExp,"(***)"));//J(***)v(***)Script jQuery (***)j(***)x'
        }
</script>

 

3. 여러줄이 있는 문자열의 J값을 찾아 "(***)"로 치환하기 ( 콘솔창확인) 

 <button onclick="test5();">m실행확인</button>
 <script>
 	 function test5(){
            const str = "JavaScript\nJQuery\nAjax"
            console.log(str);

            let regExp = /^J/;
            console.log(str.replace(regExp,"(***)"));// 첫번째줄만 수정

            regExp = /^J/g; // 한줄만 전역으로 찾기때문에 첫번째줄만 치환됨
            console.log(str.replace(regExp,"(***)"));

            regExp = /^J/gm; //여러줄 전역으로 치환  
            console.log(str.replace(regExp,"(***)"));
        }
 </script>

 

4. 주민번호 확인하기

주민번호는 앞자리 6자 - 뒷자리 7자 이며, - 뒤에 숫자는 성별을 나타내므로 1~4 사이의 값이 들어가야함
 또한 앞자리 6자의 생년월일에 월은 01~12  일에는 01~31까지의 숫자만이 들어가야함

  주민번호 : <input type="text" placeholder="'-' 포함해서 입력하시오," id="pno">
    <button onclick="test6();">확인</button>
<script>
        function test6(){
            const value = document.getElementById("pno").value;
            // 1단계 : 6글자-7글자 
            let regExp = /^......-.......$/;
            // . : 개행 문자를 제외한 모든 문자(영문,숫자,한글,특수문자) 한글자 
            // 숫자외의 다른문자가 와도 글자수만 맞으면 정상입력으로 간주됨 

            //2단계 : 숫자값6개-[1234]숫자값6개
            regExp = /^\d{6}-[1-4]\d{6}$/;
            //유효하지않은 월, 일 입력해도 정상입력으로 간주함..
            
            //3단계 
            /*
             - 생년(두자리): 아무 숫자로 두자리 채우면됨
             => \d{2}
             
             - 월(두자리): 01,02,03,04,~09,10,11,12 
                앞자리가 0일경우 뒷자리는 1~9까지 가능 => 0[1-9]
                앞자리가 1일경우 뒷자리는 0~2까지 가능 => 1[0-2]
             => (0[1-9]|1[0-2])

             - 일(두자리) ==>(0[1-9]|[1-2][0-9]|3[0-1])
                앞자리가 0일경우 뒷자리는 1-9까지 가능 => 0[1-9]
                앞자리가 1또는 2일경우 뒷자리는 0-9까지 가능 => [1-2][0-9]
                앞자리가 3일경우 뒷자리는 0-1까지 가능 => 3[0-1]

            */
            regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-[1-4]\d{6}$/
            

            if(regExp.test(value)){
                alert("정상입력!");
            }else{
                alert("잘못입력!");
            }


        }
    </script>

주민번호 :