[Javascript] 한글,숫자,영어만 입력 가능 and 특수문자 제거 함수를 쉽게 만들자!

자바스크립트로 한글, 숫자, 영어만 입력 가능하게 만들어볼까요? 쉽게 배워봐요!

여러분~ 자바스크립트를 배워볼 때 가장 재밌는 건 뭐냐면요, 우리가 원하는 대로 "입력값을 딱!" 컨트롤할 수 있다는 거예요. 예를 들어, “한글만 입력되게 해볼까?” “숫자만 되게 해볼까?” 아니면 “특수문자만 안 되게?” 이런 걸 쉽게 만들어볼 수 있답니다!

그런데요, 이걸 도와주는 아주 똑똑한 친구가 있어요. 바로 **정규식(Regular Expression)**이에요. 너무 어려운 이름이라 헷갈릴 수 있지만, 사실 알고 보면 간단하고 친절한 친구예요. 우리 오늘은 이 정규식을 이용해서 한글, 숫자, 영어만 입력하게 하거나 특수문자를 제한하는 방법을 재미있게 알아볼 거예요.

---

🌼 한글만 입력 가능하게 만들어봐요!

먼저 한글만 입력할 수 있는 함수를 만들어볼 거예요. 왜냐면 가끔씩 우리가 한글만 필요한 입력창을 만들고 싶을 때가 있잖아요? 예를 들어 이름 입력할 때요.

function onlyKorean(input) {
  const koreanRegex = /^[가-힣]+$/;
  return koreanRegex.test(input);
}

// 예시
console.log(onlyKorean("안녕하세요")); // true
console.log(onlyKorean("Hello"));     // false
console.log(onlyKorean("1234"));      // false

여기서 중요한 건 가-힣이에요. 이 범위는 한글의 유니코드라고 해서, 한글 글자들이 딱 이 범위 안에 들어가 있답니다. 그래서 이 정규식을 쓰면 "한글만!" 입력할 수 있어요. 마치 우리나라를 대표하는 규칙 같죠?

---

🌼 숫자만 입력 가능하게 해볼까요?

이번엔 숫자만 입력되도록 만들어볼게요. 전화번호나 주민등록번호 같은 곳에서 숫자만 필요하잖아요?

function onlyNumbers(input) {
  const numberRegex = /^[0-9]+$/;
  return numberRegex.test(input);
}

// 예시
console.log(onlyNumbers("1234"));    // true
console.log(onlyNumbers("12a34"));  // false
console.log(onlyNumbers("한글"));    // false

숫자는 0-9로 아주 간단히 나타낼 수 있어요. ^[0-9]+$라고 하면 입력값에 숫자만 있는지 확인할 수 있답니다. 이걸 사용하면, 사용자가 실수로 글자를 입력해도 걸러낼 수 있어요!

---

🌼 영어만 입력 가능하게 해요!

이제 영어만 입력 가능한 함수를 만들어봐요. 이건 이메일 주소를 입력하거나 영어 이름을 적는 곳에서 쓸 수 있겠죠?

function onlyEnglish(input) {
  const englishRegex = /^[A-Za-z]+$/;
  return englishRegex.test(input);
}

// 예시
console.log(onlyEnglish("Hello"));    // true
console.log(onlyEnglish("hello123")); // false
console.log(onlyEnglish("한글"));      // false

여기서 A-Z는 대문자, a-z는 소문자를 뜻해요. 두 개를 합치면 영어 알파벳 대소문자를 모두 포함할 수 있답니다. 정말 똑똑하죠?

---

🌼 특수문자를 제한하고 싶어요!

마지막으로 특수문자를 제한하는 함수도 만들어볼 거예요. 입력할 때 특수문자가 들어가면 안 되는 경우가 가끔 있잖아요?

function noSpecialCharacters(input) {
  const noSpecialCharRegex = /^[A-Za-z0-9가-힣]+$/;
  return noSpecialCharRegex.test(input);
}

// 예시
console.log(noSpecialCharacters("안녕하세요123")); // true
console.log(noSpecialCharacters("Hello!"));      // false
console.log(noSpecialCharacters("@1234"));       // false

여기선 영어, 숫자, 한글만 허용하고 나머지는 제한하는 거예요. 그래서 특수문자가 들어가면 "땡!" 하고 막아주는 역할을 하죠. 이걸 사용하면 로그인 폼이나 회원가입에서 큰 도움이 될 거예요.

---

🌼 정규식, 이렇게 쉬운 친구라니까요!

자, 이제 우리 정규식이 얼마나 친절하고 유용한지 알게 되었죠? 하지만 처음에는 조금 헷갈릴 수 있어요. 괜찮아요! 몇 번 반복해서 연습하다 보면 여러분도 금방 정규식 마스터가 될 수 있을 거예요.

정규식을 배울 때 가장 중요한 건요:

1. 규칙을 천천히 읽어보기
2. 작게 쪼개서 테스트해보기
3. 필요한 범위를 정확히 정하기

이렇게 하면 복잡해 보이는 정규식도 정말 쉽고 재미있어질 거예요.

---

🌟 마무리하며

오늘은 자바스크립트로 입력값을 필터링하는 여러 가지 방법을 알아봤어요.

• 한글만!
• 숫자만!
• 영어만!
• 특수문자 제한!

이 모든 걸 만들면서 정규식 친구가 얼마나 유용한지 확인할 수 있었죠. 앞으로 여러분이 어떤 웹사이트를 만들든, 입력값 제어는 꼭 필요할 거예요. 이 글을 참고해서 더 재미있는 프로젝트도 만들어보세요!

그럼, 다음 시간에 또 만나요~ 😊