[JavaScript] 정규식으로 소수점 자리수 제한하기

1. 정규식으로 소수점 자리수 제한

const regex = /^\d+(\.\d{1,2})?$/

• ^\d+ : 숫자로 시작
• (\.\d{1,2})? : 소수점 이하 1~2자리 (선택적)
• $ : 끝

validateDecimal(input) {
    const regex = /^\d+(\.\d{1,2})?$/;
    return regex.test(input);
}

// test example
validateDecimal('123'); // true
validateDecimal('123.45'); // true
validateDecimal('123.456'); // false
validateDecimal('abc'); // false

 

2. 동적으로 정규식 생성하기

createRegex(decimalPlaces) {
    return new RegExp(`^\\d+(\\.\\d{1,${decimalPlaces}})?$`);
}

• \\d+ : 정수
• \\.\\d{1,${decimalPlaces}} : 소수점 이하 1 부터 decimalPlaces 까지 자리수를 허용한다
• ^ 와 $ 는 문자열의 시작과 끝을 명시한다

 

3. 소수점 자리수 자동으로 잘라내기

limitDecimal(input, decimalPlaces) {
    const regex = new RegExp(`^(\\d+)(\\.\\d{1,${decimalPlaces}})?`);
    const match = input.match(regex);
    return match ? match[0] : null;
}

limitDecimal('123.456', 2); // '123.45'
limitDecimal('123.4', 2); // '123.4'
limitDecimal('123', 2); // '123'
limitDecimal('abc', 2); // null

• 정규식에서 () 를 활용해 원하는 부분(정수와 소수점)을 캡쳐한다
• match[0] 는 전체 매칭된 문자열을 반환한다

 

4. 실시간 입력값 처리하기 (onInput)

<input type="text" id="decimalInput" placeholder="Enter a number" />

<script>
    const inputField = document.getElementById('decimalInput');

    inputField.addEventListener('input', (e) => {
        const value = e.target.value;

        // 정규식: 숫자(정수)와 선택적인 소수점 2자리까지 허용
        const regex = /^\d*(\.\d{0,2})?$/;

        // 입력값이 정규식을 만족하지 않으면 잘라내기
        if (!regex.test(value)) {
            e.target.value = value.match(/^\d*(\.\d{0,2})?/)[0] || '';
        }
    });
</script>