실시간 하이픈 붙이기

0. 전체코드

// 숫자만 추출하는 함수
function extractNumbers(input) {
    return input.replace(/[^0-9]/g, '');
}

// 하이픈을 추가하는 함수
function formatNum(num) {
    if (num.length > 5) {
        return num.replace(/(\\d{3})(\\d{2})(\\d+)/, '$1-$2-$3');
    } else if (num.length > 3) {
        return num.replace(/(\\d{3})(\\d+)/, '$1-$2');
    }
    return comNum;
}

// input[name=num]에 이벤트 바인딩
$("input[name=num]").on("keyup", function() {
    let $this = $(this); 
    let num = $this.val();

    comNum = extractNumbers(num);

    // 10자를 초과하는 입력을 제한
    comNum = num.slice(0, 10);

    comNum = formatNum(num);

    $this.val(num);
});

1. 숫자만 추출하는 함수

// 숫자만 추출하는 함수
function extractNumbers(input) {
    return input.replace(/[^0-9]/g, '');
}

• [ ] : 대 괄호 안의 문자들 중 하나와 일치한다는 것을 의미 ex)[abc]는 ‘a’,’b’,’c’중 하나의 문자와 일치한다는 의미.
• ‘0-9’ : 0부터 9 까지의 모든 숫자와 일치하는 것을 의미
• ‘^’ : 대 괄호 안에서 사용될 경우 이 기호는 부정을 의미. 따라서 [^0-9]는 숫자를 제외한 모든 문자와 일치한다는 것을 의미
• ‘g’ : 이는 전역 검색을 의미하는 플래그. 문자열 내의 모든 일치 항목을 찾아서 대체한다.

따라서 input.replace(/[^0-9]/g,’’) 코드는 input 문자열에서 숫자를 제외한 모든 문자를 빈 문자열로 대체한다는 의미.

2. 하이픈을 추가하는 함수

// 하이픈을 추가하는 함수
function formatNum(num) {
    if (num.length > 5) {
        return num.replace(/(\\d{3})(\\d{2})(\\d+)/, '$1-$2-$3');
    } else if (num.length > 3) {
        return num.replace(/(\\d{3})(\\d+)/, '$1-$2');
    }
    return num;
}

1. if (num.length > 5) : 만약 num 문자열의 길이가 5보다 크다면, 아래의 정규식으로 문자열을 변환
   • /(\\d{3})(\\d{2})(\\d+)/
     • (\\d{3}) : 숫자 3자리와 일치하며, 첫번째 그룹화를 진행
     • (\\d{2}) : 숫자 2자리와 일치하며, 두번째 그룹화를 진행
     • (\\d+) : 숫자 1자리 이상과 일치하며, 세번째 그룹화를 진행
   • 대체 문자열 : $1-$2-$3
     • $1,$2,$3 : 각각 첫번째, 두번째 세번째 그룹화를 참조한다.
     • 이렇게 되면 12345678은 123-45-678로 변환된다.
2. else if (num.length > 3) : 만약 num의 문자열의 길이가 3보다 크다면, 아래의 정규식으로 문자열을 반환한다.
   • 정규식 : /(\d{3})(\d+)/
   • 대체 문자열 : $1-$2
3. 만약 위의 두 조건 모두 해당되지 않는다면 원래의 num 문자열을 그대로 반환한다.

위의 조건은, 문자열의 길이가 5를 초과할때는 3-2-+ 방식을 실행하고, 3을 초과할때는 3- +의 조건을 수행한다.

이렇게 해야 1234를 입력했을 때 실시간으로 123-4로 변환해준다.

3. input[name=num]에 이벤트 바인딩

$("input[name=num]").on("keyup", function() {
    let $this = $(this); 
    let num = $this.val();

    comNum = extractNumbers(num);

    // 10자를 초과하는 입력을 제한
    num = num.slice(0, 10);

    num = formatComNum(num);

    $this.val(num);
});

1. 이벤트 바인딩해당 input 필드에서 키를 눌렀다 뗐을 때 실행되는 함수를 정의한다.
2. $("input[name=num]").on("keyup", function() {
3. 현재 이벤트 대상 객체 잠조this는 DOM 요소를 참조하며, $(this)를 통해 해당 DOM요소를 jQuery 객체로 변환한다.
4. $this 변수에 저장함으로써 코드 내에서 여러번 참조할 때마다 jQuery 객체 변환 작업을 다시 ㅎ하지 않아도 되게끔 한다.
5. let $this = $(this);
6. 입력값 가져오기$this.val()을 사용해 현재 input 필드의 값을 가져온다.
7. let num= $this.val();
8. 숫자만 추출
9. num= extractNumbers(num);
10. 입력값 제한.slice(0, 10)을 이용해 묹나열을 처음부터 10번째 문자까지만 잘라낸다. 이렇게하면 입력값이 10자를 초과하지 않게 한다.
11. num= num.slice(0, 10);
12. 하이픈 포맷 적용
13. num= formatNum(num);
14. 변경된 값을 input 필드에 설정 :$this.val(num)을 통해 input 필드의 값을 수정된 num,으로 설정한다.
15. $this.val(num);

활용 - 휴대 번호 포매팅

function formatComTel(telNum) {
    if (telNum.length > 7) {
        return telNum.replace(/(\\d{3})(\\d{4})(\\d+)/, '$1-$2-$3');
    } else if (telNum.length > 3) {
        return telNum.replace(/(\\d{3})(\\d+)/, '$1-$2');
    }
    return telNum;
}

$("input[name=telNum]").on("keyup", function() {
    let $this = $(this);
    let telNum = $this.val();

    comTel = extractNumbers(telNum);
    comTel = telNum.slice(0, 11);
    comTel = formatTelNum(telNum);
    $this.val(telNum);
});

이를 활용하여 폰번호도 포매팅할 수 있다.

첫번째 if문의 길이조건은 어떻게 정하나 했는데, 그룹화 1, 2번째 문을 더하면 된다. 3+4이므로 7