[Javascript] 전화번호 자동 하이픈(-) 함수

 

---

---

 

 

 

 

입력폼에서 전화번호 입력했을 때 하이픈을 자동으로 기입하고 싶을 때가 있다.

 

입력할 때 계산해서 하이픈 자동 변환 함수를 만들어서 사용해 봤다.

 

function addHyphenToPhoneNumber(phoneNumberInput) {
    const phoneNumber = phoneNumberInput.value;
    const length = phoneNumber.length;

    if(length >= 9) {
        let numbers = phoneNumber.replace(/[^0-9]/g, "")
        			.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
        phoneNumberInput.value = numbers;
    }
}


const phoneInput = document.getElementById("phone");
phoneInput.addEventListener("input", () => {
	addHyphenToPhoneNumber(phoneInput);
});

<input type="text" name="phone" id="phone" >

 

 

위와 같이 사용해서

 

최소 9자리에서 11자리가 입력 됐을 때 하이픈이 자동으로 생성되게 처리하였다.

 

 

// 정규식 설명

.replace(/[^0-9]/g, "") // 숫자 제외한 문자 제거

.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`) // 숫자 $1(2,3)-$2(3,4)-$3(4) 자리로 치환

 

 

 

 

 

---

---

 

 

 

 

 

 

 

 

 

 

[JS] 전화번호 자동 하이픈(-) 정규식