HTML input 정규표현식 및 Javascript 정규표현식 사용 예시

HTML input 정규표현식

숫자만 입력 input

<input type="text" oninput="this.value = this.value.replace(/\D/g, '');">

숫자만 입력받는 input 예시입니다.

소수점 가능, 숫자만 입력 input

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

.replace(/(\.*)\./g, '$1'); = .을 중복해서 입력받지 않도록 제어합니다.

가격 입력 input

<input id="price" type="text" value="0" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\.*)\./g, '$1').replace(/\B(?=(\d{3})+(?!\d))/g, ',');">

숫자와 소수점만 입력받으며, 세 자리마다 콤마(,)를 추가하여 표시합니다.

영문, 숫자만 입력 input

<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z0-9.]/g, '').replace(/(\.*)\./g, '$1');">

특수문자 제외 한글, 영문, 숫자, 띄어쓰기만 입력 input

<input type="text" oninput="this.value = this.value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9 ]/g, '');">

Javascript 정규표현식

콤마 삭제

document.getElementById('price').value.replace(/,/g, '');

콤마 붙이기

document.getElementById('price').value = '123456789'.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

Leave a comment