[JS] 정규표현식(Regex)

개념

문자열에서 특정 문자 조합을 찾기 위한 패턴 ​

 

대표 역할

1. 문자 검색

2. 문자 대체

3. 문자 추출

 

특징 및 설명

사용하게 되면 조건문들을 한 줄로 간략하게 표현이 가능하다. 

대신 특수문자가 난무하기 때문에 가독성은 떨어진다. 

 

기본 만들기

정규 표현식은 패턴과 플래그로 구성

//RegExp 객체의 생성자 호출 방법
const regexp1 = new RegExp(pattern, flag);

//정규 표현식 리터럴
const regexp3 = /ab+c/

 

패턴 작성하기

1. 단순 패턴 사용하기

예를 들어, /abc/ 패턴은 반드시 abc를 순서대로 포함해야한다. "Grab crab" 에서 "ab c"는 정확히 "abc"가 아니기 때문에 포함하지 않는다.

 

2. 특수 문자 사용하기 

예를 들어, 하나의 "a" 이후에 0 개 이상 "b", 그 뒤에는 "c"와 일치해야 하면 /ab*c/를 사용하면 된다. 여기서 8는 이전 항목의 0번 이상 반복을 의미함. "abbbbc"와 같은것을 말한다. 

 

정규 표현식 특수 문자 

문자 클래스	\, ., \cX, \d, \D, \f, \n, \r, \s, \S, \t, \v, \w, \W, \0, \xhh, \uhhhh, \uhhhhh, [\b]
어서션(시작과 끝을 알림)	^, $, x(?=y), x(?!y), (?<=y)x, (?<!y)x, \b, \B
그룹, 범위	(x), (?:x), (?<Name>x), x|y, [xyz], [^xyz], \Number
수량자	*, +, ?, x{n}, x{n,}, x{n,m}

1. 문자 클래스

• . (줄바꿈 문자를 제외한 모든 문자) : /.
• \ (특수문자가 아닌 문자) : /\[\] ([])
• \d (숫자)
• \D (숫자를 제외한 모든 것)
• \w (모든 문자열 : 알파벳, 숫자, _)
• \W (문자를 제외한 모든 것)
• \s (띄어쓰기)
• \S (띄어쓰기를 제외한 모든 것)

2. 어서션

• \b (단어 경계) : /\bHa (Ha / Harry / Hamster), /Ha\b (Ha / HaHaHa)
• \B (단어 경계가 아님) : /Ha\B (HaHaHa)
• ^ (문장의 시작이 일치) : /^Ha (HaHaHa)
• $ (문장의 끝이 일치) : /Ha$ (HaHaHa)

3. 그룹, 범위

• | (또는) : /Hi | Hello
• () (그룹 지정) : /(Hi | Hello) | (And)
• (?:) (그룹 미지정, 찾지만 기억하지는 않음) : /gr(?:a|e)y
• [] (괄호 안의 어떤 문자든 찾아라) : /[a-zA-Z0-9]
• [^] (괄호 안의 어떤 문자든 제외하고 찾아라) : /[^a-z]

4. 수량자

• ? (없거나 있거나) : /gra?y a가 있거나 없거나 (gray / gry)
• * (없거나 있거나 많거나) : /gra*y (gry / gray / graay / graaay)
• + (하나 이상) : /gra+y (gray / graay / graaay)
• {n} (n번 반복) : /gra{2}y
• {n,} (최소 n번 이상 반복) : /gra{2,}y
• {n, m} (최소 n번 이상, m번 이하) : /gra{2,3}y

 

플래그

• 검색 방식을 설정한다
• 플래그는 옵션이다. 하나 또는 하나 이상의 플래그를 동시에 작성할 수 있다

d	부분 문자열 일치에 대해 인덱스 생성
g	전역 탐색
i	대소문자 구분 X
m	여러 줄에 걸쳐서 탐색
s	개행문자가 .과 일치함
u	"unicode", 패턴을 유니코드 코드 포인트의 시퀀스로 간주함.
y	"접착" 탐색, 대상 문자열의 현재 위치에서 탐색을 시작함

 

자바스크립트 메서드

exec()	문자열에서 일치하는 부분을 탐색합니다. 일치 정보를 나타내는 배열, 또는 일치가 없는 경우 null을 반환
test()	문자열에 일치하는 부분이 있는지 확인합니다. true 또는 false를 반환
macth()	캡처 그룹을 포함해서 모든 일치를 담은 배열을 반환합니다. 일치가 없으면 null을 반환
macthAll()	캡처 그룹을 포함해서 모든 일치를 담은 반복기를 반환
search()	문자열에서 일치하는 부분을 탐색합니다. 일치하는 부분의 인덱스, 또는 일치가 없는 경우 -1을 반환
replace()	문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 바꿉니다.
replaceAll()	문자열에서 일치하는 부분을 모두 탐색하고, 모두 대체 문자열로 바꿉니다.
split()	정규 표현식 또는 문자열 리터럴을 사용해서 문자열을 부분 문자열의 배열로 나눕니다

//문자열에서 일치하는 부분을 찾기 위해 exec()메서드 사용한 예시
const myRe = /d(b+)d/g;
const myArray = myRe.exec('cdbbdbsbz');

 

예제들

 

숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능
/^[0-9]+$/

 

 이메일 형식만 가능

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/

 

한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능
/^[가-힣]+$/

 

한글,띄어쓰기만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 가능
/^[가-힣\s]+$/

 

영문만 가능 :
/^[a-zA-Z]+$/

 

 영문,띄어쓰기만 가능
/^[a-zA-Z\s]+$/

 

전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]
/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/

 

도메인 형태, http:// https:// 포함안해도 되고 해도 되고
/^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

 

도메인 형태, http:// https:// 꼭 포함
/^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

 

도메인 형태, http:// https:// 포함하면 안됨
/^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

 

한글과 영문만 가능
/^[가-힣a-zA-Z]+$/;

 

숫자,알파벳만 가능
/^[a-zA-Z0-9]+$/;

 

주민번호, -까지 포함된 문자열로 검색
/^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

https://velog.io/@suuhyeony/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

[JS] 자바스크립트 정규표현식

https://gocoding.tistory.com/93