[jQuery] input 전화번호 하이픈 "-" 자동 처리 + 정규표현식 정리

 

input 전화번호 입력 시  하이픈 ("-") 자동으로 붙이기

 

전화번호를 넣는 input 태그 부분에, 

무조건 하이픈 ("-") 이 들어가게 하고 싶어서 찾아본 제이쿼리 정규식 코드입니다.

 

 

 

코드 출처 : https://cublip.tistory.com/326

$(document).on("keyup", ".className", function() { 
	$(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") );
});

.className은 클래스명 들어가는 부분이고 , input태그의 class 명과 동일하게 맞춰 작성하시면 됩니다.

 

See the Pen jquery phonenumber auto hypen by rebornbb (@bongcasso01) on CodePen.

 

 

+ input에 입력 시 하이픈 ("-") 을 제외하고 번호만 남게 하기

<input id="phonenum" placeholder="전화번호 입력 (-제외)"/>

$( "#phonenum" ).on( "keyup", function() {
      $(this).val($(this).val().replace(/[^0-9]/g, "").replace(/-/g, ""));
});

 

 

 

---

 

정규표현식(Regular Expression)이란?

정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다.

(이런걸 형식 언어, formal languange라고 합니다.)

 

정규표현식을 이용하면, 특정 패턴에 매칭되는 문자열을 쉽게(?) 찾아낼 수 있습니다.

 

예를 들어 010-1111-2222 라는 전호번호는

"숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있는데,

 

정규표현식으로 아래와 같이 패턴을 만들어주면,

특정 문자열이 해당 패턴에 맞는지 체크할 수 있습니다.

const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)

regex.test('010-1111-2222') // true;
regex.test('01-11-22') // false;

 

물론 수많은 문자들 중에서 전화번호만 발라낼 수도 있습니다.

const text = "안녕하세요 제 번호는 010-1111-2222 입니다. call me~!";
text.match(/\d{3}-\d{4}-\d{4}/); // 010-1111-2222

 

수많은 데이터를 다루고, 원하는 정보만 발라내야할 때 아주아주 유용하기 때문에,

기본적인 사용법을 알아두면 큰 도움이 됩니다.

 

설명출처 : https://curryyou.tistory.com/234

 

 

---

정규식 기호 모음

정규식 특정 문자 숫자 매칭 패턴

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두) 단, 줄바꿈 X
\d	숫자
\D	숫자가 아닌 것
\w	밑줄 문자를 포함한 영숫자 문자에 대응 [A-Za-z0-9_] 와 동일
\W	\w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호 \* \^ \& \! \? ...등
\b	63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
\B	63개 문자에 일치하는 경계
\x	16진수 문자에 일치 /\x61/는 a에 일치
\0	8진수 문자에 일치 /\141/은 a에 일치
\u	유니코드(Unicode) 문자에 일치 /\u0061/는 a에 일치
\c	제어(Control) 문자에 일치
\f	폼 피드(FF, U+000C) 문자에 일치
\n	줄 바꿈(LF, U+000A) 문자에 일치
\r	캐리지 리턴(CR, U+000D) 문자에 일치
\t	탭 (U+0009) 문자에 일치

---

정규식 검색 기준 패턴

기호	의미
|	OR a|b
[]	괄호안의 문자들 중 하나. or 처리 묶음 보면 된다. /abc/ : "abc"를 포함하는 /[abc]/ : "a" 또는 "b" 또는 "c" 를 포함하는 [다-바] : 다 or 라 or 마 or 바
[^문자]	괄호안의 문자를 제외한 것 [^lgEn] "l" "g" "E" "N" 4개 문자를 제외 ※ 대괄호 안에서 쓰면 제외의 뜻, 대괄호 밖에서 쓰면 시작점 뜻
^문자열	특정 문자열로 시작 (시작점) /^www/
문자열$	특정 문자열로 끝남 (종착점) /com$/

---

정규식 갯수 반복 패턴

기호	의미
?	없거나 or 최대 한개만 /apple?/
*	없거나 or 있거나 (여러개) /apple*/
+	최소 한개 or 여러개 /apple+/
*?	없거나, 있거나 and 없거나, 최대한개 : 없음 {0}와 동일
+?	최소한개, 있거나 and 없거나, 최대한개 : 한개 {1}와 동일
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하 {3,5}? == {3}와 동일

---

정규식 그룹 패턴

기호	의미
()	그룹화 및 캡쳐
(?: 패턴)	그룹화 (캡쳐 X)
(?=)	앞쪽 일치(Lookahead), /ab(?=c)/
(?!)	부정 앞쪽 일치(Negative Lookahead), /ab(?!c)/
(?<=)	뒤쪽 일치(Lookbehind), /(?<=ab)c/
(?<!)	부정 뒤쪽 일치(Negative Lookbehind), /(?<!ab)c/

정규식 그룹 패턴 부분은 꽤나 난이도 있는 정규표현식에 속한다.

어렵고 이해가 잘 안되는 것이 당연하니, 차근차근 알아가보자.

 

 

 

정리 출처 : 

📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제

---

연습용 사이트: regexr.com/5mhou

RegExr: Learn, Build, & Test RegEx