정규표현식 / 전화번호 자동 하이픈(-) 만들기

 

 

 

 

정규표현식 (Regular expression, RegExp)

슬래시(/)와 슬래시(/) 사이에 검색할 문자열 패턴을 넣고, 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있다.

/^hello-/d{2,3}$/g;

 

 

 

플래그

• 슬래시(/)가 끝난 뒤에 붙임
• 선택적으로 사용 가능
• 순서와 상관없이 하나 이상의 플래그를 동시에 설정 가능 
• 플래그를 사용하지 않는 경우, 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건 대상만을 검색하고 종료

• i (ignore case) : 대소문자를 구별하지 않고 검색
• g (global) : 문자열 내의 모든 패턴을 검색
• m (multi line) : 문자열의 행이 바뀌더라도 계속 검색 

 

 

패턴

• 매칭하여 검색하고 싶은 문자열
• 일반 문자와 특수 문자 사용 가능
• 일반 문자 - 리터럴 문자 / 특수 문자 - 메타 문자
  - 리터럴 문자 (정규 문자): 일반 문자, \0, \n, \t, \v, \f, \r, \xhh, \uhhhh, \cX
  - 메타 문자: 특정 패턴을 기술하는 문자

 

메타 문자

a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_)
\W	/w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

 

[ ]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작(괄호 없음!)
문자열$	특정 문자열로 끝남
( )	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색(분류X)
\b	단어의 처음/끝
\B	단어의 처음/끝이 아님

 

?	최대 한번(없음 or 1개)
*	(없음거나 있음): 여러개 포함
+	최소 1개( 1개 or 여러개)
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

 

 

 

 

 

RegExp.prototype 메서드

.exec( )

• 인수로 전달 받은 문자열에 패턴 검색
• 매칭 결과를 배열로 반환
• 1가지만 반환 (여러 개가 매칭되어도 하나만 반환)

 

.test( )

• 매칭 결과를 boolean으로 반환

const content = "Will you remember?";
const regExp = /i/;

regExp.exec(target);
// ["i", index: 1, input: "Will you remember?", groups: undefined]

regExp.test(target);
// true

 

 

 

String.prototype 메서드

 

.match(regExp)

• g 플래그가 지정되면 모든 매칭 결과를 배열로 반환

const content = "Will you remember?";
const regExp = /em/g;

target.match(regExp);
// ["em", "em"]

 

 

.search(regExp)

• 패턴에 맞는 문자열 index를 반환
• 맞는 문자열이 없으면 -1

const content = "Will you remember?";
const regExp = /you/;

target.search(regExp);
// 4

 

 

.replace(regExp, replace)

• 조건에 부합하는 문자열을 찾아 다른 텍스트로 변환

console.log('RegExp Study'.replace("Study","Test"));
// 결과값 : RegExp Test

 

 

.split(regExp)

• 조건을 기준으로 대상을 자른 후, 배열로 저장
• split 할 대상에 아무런 입력도 하지 않을 시(여백 포함), 대상을 하나의 배열로 반환

console.log('RegExp Study'.split(" "));
// 결과값 : ["RegExp", "Study"]

 

 

 

 

 

---

 

아이디 검사

const id_check = /^[a-z|A-Z]{3,6}[0-9]{3,6}$/;

console.log(id_check.test("abc123")); //true

 

 

비밀번호 검사

const password = /^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;

console.log(password.test("hello5hi")); //true

 

 

이메일 검사

const email = /[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]$/i;

console.log(email.test("hello5@email.com")); // true

 

 

웹 사이트 주소 검사 

const urlRegexp =
/^((http:\/\/www\.)|(www\.)|(http:\/\/))[a-zA-Z0-9._-]+\.[a-zA-Z .]{2,5}$/;

console.log(urlRegexp.test("www.domain.com")); //true
console.log(urlRegexp.test("http://www.domain.com")); //true
console.log(urlRegexp.test("http://domain.com")); //true
console.log(urlRegexp.test("www.domain.co.cc")); //true

 

 

빈 문자열 검사

const target = '';

/^$/.test(target); // true

 

 

전화번호 검사

const localPhone = /^(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4])-)(\d{3,4}-)(\d{4})$/;

console.log(localPhone.test("02-345-6789")); //true

 

 

핸드폰 번호 검사

const cellPhone = /^(?:(010)|(01[1|6|7|8|9]))-\d{3,4}-(\d{4})$/;

console.log(cellPhone.test("010-123-4567")); //true

 

 

 

 

---

 

전화번호 자동 하이픈(-) 정규식

<h2>전화번호 하이픈 자동 생성</h2>
<input type="text" oninput="autoHyphen2(this)" maxlength="13" placeholder="전화번호를 입력하세요">

<script>
    const autoHyphen2 = (target) => {
        target.value = target.value.replace(/[^0-9]/g, '') // 숫자가 아닌 문자를 제거
                    .replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3") // 전화번호를 3-4-4형식으로 만듦
                    .replace(/(\-{1,2})$/g, ""); // 마지막에 하이픈이 있는 경우 제거
    };
</script>

 

 

 

---

 

참고 사이트

 

정규식 테스트 사이트

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

 

 

정규식 도식 생성 사이트

https://regexper.com/

Regexper

 

 

 

---

참고

 

Javascript에서 정규표현식(Regular Expression) 사용하기

 

JavaScript | 정규 표현식 (RegExp)

 

 

[JS] 전화번호 자동 하이픈(-) 정규식