[Vue] 카드번호 자동 하이픈(-) 정규식

<template>
    <div>
    	<input type="text" v-model.trim="cardNumber" @input="handleInput"/>
    </div>
</template>

<script>
export default {
	data() {
		return {
			cardNumber: ''
		}
	},
    methods: {
    	handleInput(event) {
        	// first parmas: 사용자가 타입할때 들어오는 값
            // second parmas: 타입 시점의 cardNumber 전체 값
        	this.cardNumber = this.cardFomatter(event.data, event.target.value);
        },
        cardFormatter(value, cardNumber) {
            if (cardNumber.length > 19) reutrn;
            
            let result = '';
            
            // 0-9까지의 숫자와 하이픈(-) 값 체크
            let check01 = /[^0-9-]/g;
            
            // 하이픈 값 체크
            let check02 = /[-]/g;
           
           
           if (check01.test(cardNumber) || check02.test(value)) {
           	result = cardNumber.slice(0, -1);
           } else {
           // 0000-0000-0000-0000 형식이 되도록 숫자 4자리가 들어오면
           // 하이픈을 자동으로 넣어준다
           	result = cardNumber.match(/[0-9●]{1,4}/g)?.join('-') || cardNumber;
           }
           
           return reuslt;            
        }
    }
}

</script>