onKeyup이벤트로 정규표현식을 이용해 숫자만 입력받기

input에 오직 숫자만 입력받으려고 한다.

따라서 0~9가 아닌 문자열은 모두 제거하면 된다.

여기서 onKeyup은 키보드의 키를 눌렀다가 뗐을 때 발생하는 이벤트다.

onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"

See the Pen XOG9.blog_113 by 김규진 (@xhrsfpkw-the-typescripter) on CodePen.

 

this.value는 현재 input 필드의 값을 말한다.

현재 input 필드에 '문자 테스트123'이라는 값이 있다고 가정하면 this.value는 '문자 테스트123'이 된다.

 

다음에 '문자 테스트123'이라는 값을 replace 한다.

/[^0-9]/g는 정규 표현식으로, 숫자가 아닌 모든 문자를 의미한다.

^는 not을, 0-9는 숫자를, g는 global을 의미해 문자열 내에서 대상을 모두 찾아낸다.

 

, 뒤의 ''은 숫자가 아닌 문자를 모두 ''로 대체한다는 뜻인데, 빈 문자열로 설정되어 있기 때문에 대체 대상을 삭제한다.

따라서 '문자 테스트 123'이라는 값은 replace에서 정규 표현식을 거쳐 '123'이라는 값이 된다.