[JavaScript] 12. 정규표현식

1. 정규식

- 정규표현식(REGEX / REGEXP : Reqular Expression) 이란, 특정패턴을 가진 문자열을 찾거나 또는 찾아서 변경할 때 사용하는 형식 언어

- 정규표현식을 이용하면 문자열에 대해 특정패턴 조건 검사 시 또는 치환시 복잡한 조건을 제시할 필요없이 간단하게 처리 가능하다.
- 자바스크립트뿐만 아니라 자바나 오라클등 다른언어에서도 사용가능

 

 

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

▶ 정규표현식 객체 생성 == 정규식 년수를 선언 == 검색조건으로 삼고자하는 문자열이나 패턴을 제시해야함

 

 

▶ 정규식 객체 생성

const regExp = /script/;  // 정규식 객체 단축생성 구문             const regExp2 = new RegExp("script") // 정규식 객체 생성             console.log(regExp, regExp2);

 

 

☞ 두 구문 모두 정규식 객체 생성 구문으로 동일하다.

 

 

 

▶ RegExp객체에서 제공하는 메소드(정규식.xxx(문자열))
 - 정규식.test(문자열) : 문자열에서 정규식 값과 일치하는 값이 있으면 true / 없으면 false 반환
 - 정규식.exec(문자열) : 문자열에서 정규식 값과 일치하는 값이 있으면 처음 일치하는 문자열을 반환 / 없으면 null 반환

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

 

 

 

▶ 비교할 문자열

const str1 = 'javascript jquery ajax';             const str2 = 'java oracle html css';

 

▶ 정규식 메소드

 

 

▶ 문자열 메소드

 

☞ repalce는 원본에 영향을 끼치지 않는다.

 

 

 

---

2. 메타문자

- 메타문자를 이용해서 정규식으로 검색 조건으로 삼을 특정 패턴을 제시할 수 있다.
- 문자열이 해당 정규식으로 제시한 특정페턴에 만족하는지 test()를 이용해서 검사하거나, replace()를 이용해서 치환할 수 있다.

 

 

▶ 비교할 문자열

const str = 'javascript jquery ajax';

 

 

1) 메타문자가 없는 케이스

let regExp = /a/;             area2.innerHTML += `/a/ : ${regExp.test(str)}<br>`;             area2.innerHTML += `/a/ : ${str.replace(regExp, "(***)")}<br>`;

 

☞ replace는 첫번째 a문자만 변경된다. replace는 값을 치환시 일치하는 값들 중 "첫번째" 값만 바꿔준다.

 

 

---

2) 메타문자가 있는 경우

str은 위에 비교할 문자열의 값으로 한다.

 

(1)  ^ : 시작을 의미 => css 속성선택자 중 ^= : 해당값으로 "시작"하는 경우를 의미

 

 

 

(2) [ ] : [ ] 내의 문자중 하나라도 존재할 경우를 의미

 

☞ replce 첫번째 값만 치환됨

 

 

 

(1,2) 세트로 묶기 - ^ 와 [ ] 사용

regExp = /^[jsa]/;  // 시작값이 j거나 s거나 a인지 체크 area2.innerHTML += `/^[jsa] : ${regExp.test(str)}<br>`;   area2.innerHTML += `/^[jsa] : ${str.replace(regExp, "(***)")}<br>` // 시작값만 (j)만 치환됨

 

=> 만약 시작값이 j 또는 s, a가 아니라면 false 결과 반환됨

 

 

 

(3) $ : 끝을 의미. css속성선택자 $= : 속성값이 끝으로 끝나는 경우를 의미

 

 

 

(1,3) 세트로 묶기 - ^, $ 사용

▶ 시작값은 j이고 끝값은 x인지 확인

 

regExp = /^jx$/;   ==>  (X)

☞ 이 정규식은 문자열이 jx로 시작하고 jx로 끝나는 문자열인지 검사한다. 첫글자, 마지막글자를 따로따로 검사할 수 X !!!

 

regExp = /^[jx]$/;     // 시작과 끝이 jx인지 확인

area2.innerHTML += `/^[jx]$/ : ${regExp.test(str)}<br>`;    ==> false 출력

 

 

 

(4) . : 개행문자를 제외한 모든 문자(영문자, 숫자, 한글, 특수문자)

(5) + : 한글자 이상(0글자 x)

ex) .+ : 개행문자를 제외한 모든 문자가 한글자 이상인 경우

regExp = /^j.+x$/              area2.innerHTML += `/^j.+x$/ : ${regExp.test(str)}<br>`;             area2.innerHTML += `/^j.+x$/ : ${str.replace(regExp,"(***)")}<br>`;

 

☞ 시작은 j로 시작하고 끝은 x로 끝나면서 중간에 한글자이상의 문자가 존재할 수 있다.

 

 

▶ 개수는 상관없이 시작부터 끝까지 오직 숫자만 작성해야하는 케이스. 단, 최소 한글자는 무조건 존재해야함.

regExp = /^[0123456789]+$/ regExp = /^[0-9]+$/  // 0123456789  -> 0-9로 줄여서 표현가능 area2.innerHTML += `/^[0-9]+$/ : ${regExp.test("12121212d")}<br>`;

 

☞ 12121212d  => d때문에 조건을 불만족하게 되어 false 반환된다.

 

 

▶ 시작부터 끝까지 오직 영문자로만 이루어진 경우(개수는 상관없으나, 최소 한글자는 무조건 있어야함)

 

 

▶ 시작부터 끝까지 오로지 한글로만 이루어진 경우 
- 자음 = ㄱ-ㅎ
- 모음 = ㅏ-ㅣ
- 결합 = 가-힣

 

regExp = /^[가-힣]+$/; // regExp = /^[가-힣ㅏ-ㅣ]+$/;  // 모음도 추가하고 싶다면 ㅏ-ㅣ 추가 area2.innerHTML += `/^[가-힣]+$/ : ${regExp.test("자바스크립트최고")}<br>`;

 

 

---

3. 플래그 문자

- i : 대소문자를 가리지 않고 비교를 수행하겠다.
- g : 문자열 내의 "모든" 패턴을 찾는다. (즉, 전역으로 비교를 수행하겠다)
- m : 여러줄 비교를 수행하겠다. 

 

    <button onclick="test3();">확인</button>

    <script>
        function test3(){
            let str = "JavaScript JQuery Ajax";

            // g
            let regExp = /a/g;
            console.log('/a/g : ', str.replace(regExp, '(***)'));  // 모든 a가 치환됨

            // ig
            regExp = /a/ig;
            console.log('/a/ig : ', str.replace(regExp, '(***)'));

            str = str.split(" ").join("\n");  // "JavaScript\nJQuery\nAjax"
            console.log(str);

            str = "JavaScript\nJQuery\nAjax";
            console.log(str);

            regExp = /^J/;
            console.log("/^J/", str.replace(regExp,'(***)'));  // 첫줄에 J만 치환됨

            regExp = /^J/g;
            console.log("/^J/g", str.replace(regExp,'(***)'));   // g를 추가하여도 위에 /^J/와 결과는 같음(첫번째 J만 치환됨)

            regExp = /^J/gm;
            console.log("/^J/gm", str.replace(regExp,'(***)'));  // 각 라인의 시작이 "J"라면 치환된 것을 볼 수 있음
        
        }
    </script>

 

 

 

---

4. 정규식을 가지고 주민번호 확인

    주민번호 : <input type="text" placeholder="-포함해서 입력하시오" id="pno">
    <button onclick="test4();">확인</button>

    <script>
        function test4(){
            // 사용자가 입력한 주민번호 값
            const value = pno.value;

            // 6글자-7글자
            // . : 개행문자를 제외한 모든 문자
            // step 1) 숫자 외에 다른문자가 와도 글자수만 맞으면 정상입력으로 간주
            let regExp = /^......-.......$/;
            

            // step 2) 주민번호 입력글자가 숫자인지 아닌지 검사

            regExp = /^\d{6}-[1-4]\d{6}}$/;

            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>

 

▶ step 1) 숫자 외에 다른문자가와도 글자수만 맞으면 정상입력으로 간주

let regExp = /^......-.......$/;

 

 

▶ step 2) 주민번호 입력글자가 숫자인지 아닌지 검사

① regExp = /^[0-9][0-9][0-9][0-9][0-9][0-9]-[1-4][0-9][0-9][0-9][0-9][0-9][0-9]$/

 

※ 추가 메타 문자
   - \d : 숫자([0-9]와 동일)
   - \D : 숫자를 제외한 모든 문자

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

   - \s : 공백문자(띄워쓰기, 탭, 줄바꿈)
   - \S : 공백문자를 제외한 나머지

 

② regExp = /^\d\d\d\d\d\d-[1-4]\d\d\d\d\d\d$/;

 

※ 수량 문자
- + : 1글자 이상
- * : 0글자 이상
- ? : 0글자 이거나 1글자(즉, 2글자 이상은 불가능)

- {6} : 6글자
- {2,5} : 2글자 이상 5글자 이하
- {2,} : 2글자 이상
- {,6} : 6글자 이하

 

 

③ regExp = /^\d{6}-[1-4]\d{6}}$/;

 

 

※ 생년월일 자리수 체크

- 생년(두자리) : 0~9까지의 숫자 모두 활용 가능
  아무 숫자나 2개만 존재하면 된다 => \d{2}

 

- 월(두자리) : 01~12 -> 0,1 0-9
  앞자리가 0일 경우 뒷자리는 : 1~9 가능 : 0[1~9]
  앞자리가 1일 경우 뒷자리는 : 0~1 가능 : 1[0-2]
  두 경우의 수를 묶어주기, (경우1 | 경우2)
   → (0[1-9] | 1[0-2])

 

- 일(두자리) : 
   앞자리가 0일 경우 뒷자리는 1~9 : 0[1-9]
   앞자리가 1일 경우 뒷자리는 0~9 : 1[0-9]
   앞자리가 2일 경우 뒷자리는 0~9 : 2[0-9] -> 위 조건과 합쳐서 [1-2][0-9]
   앞자리가 3일 경우 뒷자리는 0-1 : 3[0-1]
  → (0[1-9] | [1-2][0-9] | 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}$/;

☞ \d{2} 생년 입력
☞ (0[1-9]|1[0-2]) : 앞자리가 0 이면 뒷자리 1-9 입력, 앞자리가 1이면 뒷자리 0-2 입력(10월~12월생)
☞ (0[1-9]|[1-2][0-9]|3[0-1]) : 일이 앞자리가 0이면 1-9 입력, 앞자리가 1또는 2이면 0-9 입력, 앞자리가 3이면 0-1 입력

 

 

▶ 검사

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