[JAVASCRIPT] 정규식(regExp) - 한글 영어 숫자만 입력받기

JAVASCRIPT

 

2023. 03. 18 [수정] or로 잘못설명된 '|' 를 삭제하였습니다. 김코더님 감사합니다.

---

한글, 영어, 숫자만 입력받는 정규표현식

정규식(정규표현식)은 문자열을 처리하기 위한 패턴을 정의하는 표현식입니다. 문법은 조금씩 다르지만, 자바스크립트뿐만 아니라 다양한 프로그래밍 언어에서 지원합니다. 정규식을 적절히 활용하면 문자열을 다루는 코드의 가독성이 좋아지고, String 객체의 내장 메서드로는 해결할 수 없는 다양한 작업도 해낼 수 있습니다.

 

영문 아이디, 이메일, 전화번호 등 대부분의 테스트는 validator 패키지로 쉽게 해결할 수 있습니다만

 

• 영문아이디 - isAlphanumeric()
• 이메일 - isEmail()
• 핸드폰번호 - isMobilePhone()

https://www.npmjs.com/package/validator

validator

 

ko-KR
아쉽게도 isAlpha(), isAlphanumeric() 언어설정에 한글은 없습니다.

 

한글, 영어, 숫자만을 허용하는 정규식은 다음과 같이 작성할 수 있습니다.

const regex = /^[ㄱ-ㅎ가-힣a-zA-Z0-9]+$/;

/ : 정규식 시작
^ : 입력 시작
 
[ : 여기부터 문자셋
[ㄱ-ㅎ] : ㄱ, ㄴ, ㄷ, ㄹ, ..., ㅎ
| : 또는(or)
[가-힣] : 가, 각, 간, 갇,  . . . , 힢, 힣
| : 또는(or)
a-z : a, b, c, d, ..., z
| : 또는(or)
A-Z : A, B, C, D, ..., Z
| : 또는(or)
0-9 : 0, 1, 2, ..., 9
] : 여기까지 문자셋
 
+ : 앞의 문자셋이 1회 이상 나타났는지
 
$ : 입력 끝(^부터 ~ $까지)
/ : 정규식 끝

 

 

 

테스트

문자셋에 대응되는 입력만 1회 이상 나타났으면 regex test에서 true, 문자셋 이외의 입력(특수문자 등)이 나타나면 false를 반환합니다.

const regex = /^[ㄱ-ㅎ가-힣a-zA-Z0-9]+$/;

regex.test("한글") // true
regex.test("English") // true
regex.test("123") // true
regex.test("한글English123") // true

regex.test("!") // false
regex.test("★") // false
regex.test("한글!") // false

 

공백입력까지 허용하려면 + 를 * 로 바꿔줍니다.

const regex = /^[ㄱ-ㅎ가-힣a-zA-Z0-9]+$/;

regex.test("") // false

const regex2 = /^[ㄱ-ㅎ가-힣a-zA-Z0-9]*$/;

regex2.test("") // true

---

MDN document - RegExp

RegExp - JavaScript | MDN