[TIL - 23.12.04] 자바스크립트 정규식 input에 번호만 입력(하이픈 추가)

1. Vue 2

 

1) 이번주 배운 내용

<tr>
  <th>회사전화<span class="require-mark edit"></span></th>
  <td>
    <div class="col-contents">
      <div class="contents-wrap">
        <input type="text" maxlength="14" v-model="companyPhoneNumber" :readonly="disabled" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(^02|^031|^032|^033|^041|^043|^044|^051|^052|^053|^054|^055|^061|^062|^063|^064|^0504|^0505|^0507|.{0}|^01.{1}|[0-9]{3,4})([0-9]{3,4})([0-9]{4})/g, '$1-$2-$3');">
      </div>
    </div>
  </td>
</tr>

 

- oninput 함수는 값이 바뀔때마다 실행된다.

.replace(/[^-0-9]/g,'')

- 숫자만 입력 가능하게 한다.

 

.replace(/(^02|^031|^032|^033|^041|^043|^044|^051|^052|^053|^054|^055|^061|^062|^063|^064|^0504|^0505|^0507|.{0}|^01.{1}|[0-9]{3,4})([0-9]{3,4})([0-9]{4})/g, '$1-$2-$3')

- 02, 031, 032 ... 는 지역번호.

- 소괄호()가 문자열 한 뭉치다.

- 첫번째 뭉치에는 지역번호(02, 031, 033... 에 이어 01{숫자 1자리 - 핸드폰 번호 첫 010, 011, 016등등 019까지} 3 ~ 4자리가 들어간다.)

- 두번째 뭉치에는 0-9까지 숫자가 3 ~ 4자리.

- 세번째 뭉치에는 0-9까지 숫자가 4자리가 들어간다.

- /g는 플래그라고 하며, 전체에서 해당되는 모든 문자열을 담은 배열을 반환하라는 의미다.

 

2) 지역번호

출처: 나무위키(https://namu.wiki/w/%EC%A7%80%EC%97%AD%EB%B2%88%ED%98%B8)

 

3) 참고

 

[Javascript] Input박스에 숫자만 입력 가능하게 제어하기

 

자바스크립트 전화번호/휴대폰번호 정규표현식, 의미 설명