리액트_자바스크립트_연락처 10자리 11자리 12자리 지역번호02 정규식

startsWith

 

11자리 연락처 3-4-4

12자리 연락처 4-4-4

10자리 3-3-4 연락처

10자리 02 지역번호만 2-4-4

인풋박스를 3개로 나누지 않고 타입을 text로 받되,

숫자만 입력을 받고, 

형태에 맞게 하이픈이 자동 입력될 수 있도록 하고 싶었습니당

3번째 자리가 입력되면 뒤부터 - 하이픈 일단 생성

연락처가 12자리라면 4번째 뒤부터 - 이 붙도록

10자리를 쓴다면 두 개의 경우 (02로 시작하는 경우와 아닌경우)

시작이 02라면 02-0000-0000 형태로, 02가 아니고 10자리라면 000-000-0000 형태로,

그래서 앞자리는 select가 좋....습니다ㅎㅎㅎㅎㅎㅎㅎ

    const [phone, setPhone] = useState('');

    const handlePhoneChange = (event) => {
        let value = event.target.value.replace(/\D/g, ''); //숫자 입력만 받기

        if (value.length > 12) {    //하이픈 제외 총 길이 12자리
            value = value.slice(0, 12);
        }

        let formattedValue = '';

        if (value.length === 12) {       //숫자가 12자리라면
            const part1 = value.slice(0,4); 
            const part2 = value.slice(4,8); 
            const part3 = value.slice(8,12)

            formattedValue += part1 + '-' + part2 + '-' + part3;

        } else if (value.length === 10) {
            let part1;
            let part2;
            let part3;

            if(value.startsWith('02')) { // 첫 두 자리가 '02'인 경우
                part1 = value.slice(0,2);
                part2 = value.slice(2,6);
                part3 = value.slice(6);
                
                formattedValue += part1 + '-' + part2 + '-' + part3;
                
              } else { // 그 외의 경우 
                part1 = value.slice(0,3);
                part2 = value.slice(3,6);
                part3= value.slice(6);

                formattedValue += part1 + '-' + part2 + '-' + part3;
              }

        } else if (value.length > 3) {      //3자리 입력 직후 하이픈이 생성
            const part1 = value.slice(0,3);
            const part2 = value.slice(3,7);
            const part3 = value.slice(7,11)
    
            formattedValue += part1 + '-' + part2 + '-' + part3;
        
        } else {
            formattedValue = value;
        }
        setPhone(formattedValue);
    };

오늘은 그만 안녕~! 쉬어 나리!!