JavaScript - 한글, 영어, 숫자만 입력 받기 (정규표현식)

자바스크립트에서 문자열을 입력받을 때 숫자만 입력받거나, 영어 또는 한글만 입력받고 싶을 때가 있습니다. 필요하지 않은 문자열을 사용자가 입력하는 경우, 사용자에게 다시 입력하도록 안내할 수 있습니다.

정규표현식을 이용하면 입력받은 문자열이 한글, 영어, 숫자로만 구성되었는지 확인할 수 있습니다. 어떻게 구현하는지 알아보겠습니다.

1. 문자열에 한글, 영어, 숫자만 있는지 확인

정규표현식(regex)은 /pattern/flag로 표현하며, test(string) 함수는 인자로 전달된 문자열이 정규표현식의 패턴과 일치하면 true를 리턴하며 그렇지 않으면 false를 리턴합니다.

아래 예제와 같이 정규표현식을 구성하면, 문자열에 한글, 영어, 숫자만 있을 때 true를 리턴합니다. 패턴에 사용된 표현식의 의미는 아래와 같습니다.

• ^ : 문자열의 시작을 의미
• [ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|] : 한글, 소문자 영어, 대문자 영어, 숫자에 해당하는 문자 1개를 의미
• \+ : 문자 1개 이상을 의미
• $ : 문자열의 끝을 의미

const regex = /^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]+$/;

let str = "aaaa123";
console.log(regex.test(str));

str = "aAAbbB123";
console.log(regex.test(str));

str = "aA가나다라B123ㄱㄱㄱ";
console.log(regex.test(str));

str = "こんにちは1234";
console.log(regex.test(str));

위 코드를 실행하면, 일본어가 포함된 こんにちは1234만 false를 리턴합니다. Output:

true
true
true
false

2. 문자열에 숫자만 있는지 확인

정규표현식 패턴 /^[0-9]+$/는 0에서 9 사이의 숫자 1개 이상을 의미합니다. 아래와 같이 문자열이 숫자로만 구성되어있는지 확인할 수 있습니다.

const regex = /^[0-9]+$/;

let str = "aaaa123";
console.log(regex.test(str));

str = "aA가나다라B123ㄱㄱㄱ";
console.log(regex.test(str));

str = "123";
console.log(regex.test(str));

Output:

false
false
true

3. 문자열에 알파벳만 있는지 확인

정규표현식 패턴 /^[a-z|A-Z]+$/는 소문자 또는 대문자 알파벳 1개 이상을 의미합니다. 아래와 같이 알파벳으로 구성된 문자열인지 확인할 수 있습니다.

const regex = /^[a-z|A-Z]+$/;

let str = "aaaa123";
console.log(regex.test(str));

str = "123가나다";
console.log(regex.test(str));

str = "aAAAbb";
console.log(regex.test(str));

Output:

false
false
true

4. 문자열에 한글만 있는지 확인

정규표현식 패턴 /^[ㄱ-ㅎ|가-힣]+$/는 한글 1개 이상을 의미합니다. 아래와 같이 한글로 구성된 문자열인지 확인할 수 있습니다.

const regex = /^[ㄱ-ㅎ|가-힣]+$/;

let str = "aaaa123";
console.log(regex.test(str));

str = "123가나다";
console.log(regex.test(str));

str = "가나다라";
console.log(regex.test(str));

Output:

false
false
true