JavaScript_02. 문법_18_Regular Expression (정규 표현식)

※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.

https://www.yes24.com/Product/Goods/105608999

바닐라 자바스크립트 - 예스24

 

 

 정규 표현식은 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴이다. 실무에서 정규 표현식을 가장 많이 사용하는 사례는 사용자가 입력한 이메일 정보가 이메일 형식에 맞는지, 전화번호가 전화번호 형식에 맞는지 등 사용자로부터 입력받은 데이터가 프로그램에서 받고자 하는 데이터 형식과 일치하는지 체크할 때 등이다. 정규 표현식을 줄여서 정규식이라 하기도 한다. (대소문자 구분함)

 

 

● 정규식 만들기

 정규식을 만드는 방법은 두 가지가 있다.

 

1. 슬래시(/)로 감싸는 패턴인 정규식 리터럴을 사용하는 방법

// 문자열에 World에 대응되는 문자열을 찾는 패턴 정의

const regexp = /World/;

 

2. RegExp 객체의 생성자 함수를 사용하는 방법

// 문자열에 World에 대응되는 문자열을 찾는 패턴 정의

const regexp = new RegExp("World");

 

 

● 정규식 함수

 다음은 정규식에서 제공하는 내장 함수이다.

 

함수	설명
exec	정규식을 통해 찾고자 하는 문자열 패턴을 찾고 배열을 반환한다. 대응되는 문자열을 찾지 못하면 null를 반환한다.
test	대응되는 문자열이 있는지 검사하고 있으면 true, 없으면 false를 반환한다.
match	대응되는 문자열을 찾아 배열로 반환하는 String 객체 내장 함수이다.
search	대응되는 문자열이 있는지 검사하고, 대응되는 첫 번째 문자열의 인덱스를 반환한다. 대응되는 문자열이 없으면 -1을 반환한다.
replace	대응되는 문자열을 찾아 다른 문자열로 치환하는 String 객체 내장 함수이다.
split	대응되는 문자열을 찾고, 찾은 문자열을 기준으로 나누어서 배열로 반환하는 String 객체 내장 함수이다.

 

 

 

● 정규식 특수 문자

 정규식은 /World/같이 정규식 페턴에 사용하는 문자가 단순 문자로 구성될 수도 있지만, 정규식에서 사용할 수 있는 특수 문자를 잘 조합해서 사용하면 훨씬 복잡한 문자열 패턴을 찾을 수 있게 된다.

 

특수문자	설명
＼	정규식 특수 문자 중에는 어떠한 경우에는 특수문자로써 동작하는 것이 아니라 문자 그대로 일반 문자로 인식되어야 하는 경우가 있다. 이를 구분하기 위해서는 특수 문자로 사용될 수 있는 문자앞에 백슬래시(＼)가 있으면 특수문자가 아닌 일반 문자로 인식하게 된다. 특수 문자 앞에 위치한 백슬래시(\)는 ‘다음에 나오는 문자는 특별하지 않고, 문자 그대로 해석되어야 한다’는 사실을 가리킨다.
^	입력의 시작 부분에 대응된다. 예를 들어, 정규식 패턴을 /A/ 라고 만들고 문자열 "an A" 에서 해당 정규식 패턴을 찾으면 "A"가 있기 때문에 대응되는 문자열을 찾게 된다. 하지만 정규식 패턴을 /^A/라고 만들고 문자열 "an A" 에서 해당 정규식 패턴을 찾으면 대응되는 문자열을 찾지 못한다. 왜냐하면 특수문자 ^는 문자열의 시작을 의미하므로 정규식 /^A/는 반드시 문자열이 A로 시작되어야 하기 때문이다.
$	입력의 끝 부분과 대응된다. 특수 문자 ^ 과 반대로 $ 는 문자의 끝부분을 의미한다. 예를 들어, /t$/는 문자열의 끝이 "t"로 끝난다는 것을 뜻한다. "easter" 문자열에는 "t"가 있지만 대응되지 않고, "eat" 는 끝이 "t"로 끝나므로 대응된다.
*	특수 문자 * 앞의 표현식은 0회 이상 반복되는 부분과 대응된다. {0,} 와 같은 의미이다. 예를 들어, /bo*/ 는 문자열에 “b”를 포함하고 “b” 다음 문자로 “o”가 0회 이상, 즉 “o”가 없을 수도 있고, 있을 수도 있다는 의미이다. 문자열 “boom”의 “b”는 대응되고, “A bird”도 대응되지만, “A goat”는 대응되지 않는다.
+	특수 문자 + 앞의 표현식이 1회 이상 반복되는 부분과 대응된다. {1,} 와 같은 의미이다. 예를 들어, /bo+/ 는 문자열에 “b”를 포함하고 “b” 다음 문자로 “o”가 반드시 1회 이상 있어야 대응된다. 문자열 “boom”의 “boo”는 대응되고, “A bird”의 “b”는 대응되지 않는다.
?	특수 문자 ? 앞의 표현식이 0 또는 1회 등장하는 부분과 대응된다.  {0,1} 와 같은 의미이다. 예를 들어,  /e?le?/ 는 “e”가 없어도 되고 있다면 1회를 의미하기 때문에, 결국 문자열에 “l”, “el”, “ele”, “le”를 포함하고 있는지와 대응된다. 그래서 “angel”의 “el”에 대응되고, “oslo”의 “l”에 대응된다.
.	단일 문자에 대응된다. 예를 들어, /.n/는 “an apple”에서 “an”에 대응된다. “.” 을 기준으로 앞이나 뒤에 문자가 있어야 true
(x)	괄호는 포획 괄호(capturing parentheses)라 부른다. 괄호 안에 패턴 전체에 적용 된다. 예를 들어, /foo{1,2}/ 는 마지막 “o”에만 {1,2}가 적용되어 “o”기 최소 한 번, 최대 2번 나타나는 것에 대응된다. 여기서 /(foo){1,2}/ 처럼 포획 괄호를 사용하면 “foo” 전체에 {1,2}가 적용되어 “foo”가 최소 한 번, 최대 2번 나타나는 것에 대응된다.  이 특수 문자는
(?:x)	여기서 괄호는 비포획 괄호(non-capturing parentheses)라 부른다. 사용법은 (x)와 동일하지만, 차이점은 대응되는 결과를 기억하지 않는다.
x(?=y)	‘x’ 뒤에 ‘y’가 뒤따라오는 경우에만 대응된다. 이것을 lookahead라고 부른다. 예를 들어, /\d+(?=g)/는 숫자 뒤에 “g”가 뒤따라오는 경우에만 대응된다. “an apple is 100g”의 “100”에 대응된다.
x(?!y)	‘x’ 뒤에 ‘y’가 없는 경우에만 대응된다. 이것을 negative lookahea라고 부른다.
x|y	‘x’ 또는 ‘y’에 대응된다. 예를 들어, /greenlred/ 는 문자열에 “green” 혹은 “red”가 포함되었는지에 대응된다. “green apple”의 “green”에 대응되고, “red apple”의 “red”에도 대응된다.
{n}	앞 표현식이 n번 나타나는 부분에 대응된다. n은 반드시 양의 정수이다. 예를 들어, /e{2}/ 는 “green”의 “ee”에 대응되고, “red”의 “e”에는 대응되지 않는다. 주의해야 할 점은 “greeeen”에는 “e”가 4개 들어 있지만, 처음 나타나는 “ee”에만 대응된다.
{n,m}	n과 m은 양의 정수이고, n<=m 을 만족해야 한다. 앞 표현식은 최소 n개, 최대 m개가 나타나는 부분에 대응된다. 예를 들어, /e{1,3}/ 는 “e”가 최소 1개 이상, 최대 3개를 의미하기 때문에 “red”의 “e”에 대응되고, “green”의 “ee”에 대응된다. 주의해야 할 점은 “greeeen”에 “e”가 4개 들어 있지만, 처음 나타나는 “eee”에만 대응된다.
[xyz]	문자셋입니다. 하이픈(-)을 사용해서 문자의 범위를 지정할 수 있다. 예를 들어, [a-d] 는 [abcd]와 똑같이 동작하며 문자열에 “a”, “b”, “c”, “d” 중 하나라도 있다면 대응된다.
[^xyz]	부정 문자셋입니다. 패턴에 포함된 문자가 없는지와 대응됩니다. 하이픈(-)을 사용해서 문자의 범위를 지정할 수 있다. 예를 들어, [^a-d] 는 문자열에 “a”, “b”, “c”, “d” 모두 없는지와 대응된다.
[＼b]	백스페이스에 대응된다. 백스페이스 문자에 대응시키려면, 대괄호([])를 사용해야 한다.
＼b	문자열에 있는 단어의 경계, 즉 첫 문자와 종료 문자에 대응된다. 예를 들어, /\bm/ 는 문자열의 단어 중 “m”으로 시작하는 단어에 대응된다. “moon”의 “m”에 대응된다. /oon\b/는 문자열의 단어 중 “oon”으로 끝나는 단어에 대응됩니다. “moon”의 ”oon”과 대응된다.(\b을 기준점(시작,끝)으로 생각하면 편하다)
＼B	단어 경계가 아닌 부분에 대응된다.
＼d	숫자 문자에 대응됩니다. [0-9]와 동일하다. 예를 들어, /\d/는 “Cloud9”에서 “9”에 대응된다.
＼D	숫자 문자가 아닌 문자에 대응된다. [^0-9]와 동일하다. 예를 들어, /\D/는 “Cloud9”에서 “C”에 대응된다.
＼f	폼피드(U+000C) 문자에 대응된다.
＼n	줄 바꿈(U+000A) 문자(새로운 줄)에 대응된다.
＼r	엔터 키에 해당하는 문자에 대응된다.
＼s	하나의 공백 문자에 대응된다. 예를 들어, /\s\w*/는 공백문자가 하나 있고, 0개 이상의 문자를 의미하기 때문에 “foo bar”의 “bar”에 대응된다.
＼S	공백 문자가 아닌 문자에 대응된다. 예를 들어, /\S\w*/는 “foo bar”의 “foo”에 대응된다.
＼t	탭(U+0009) 문자에 대응된다.
＼v	수직 탭(U+000B) 문자에 대응된다.
＼w	밑줄 문자를 포함한 숫자, 영문 문자에 대응된다. [A-Za-z0-9_]와 동일하다. 즉 _, A~Z, a~z, 0~9와 동일하다.
＼W	밑줄 문자, 숫자, 영문 문자가 아닌 문자에 대응된다. [^A-Za-z0-9_]와 동일하다.
＼0	널(U+0000) 문자에 대응된다.
＼xhh	16진수 hh에 대응된다.
＼uhhh	유니코드 문자 16진수 hhh에 대응된다.

 

 

 

● 정규식 플래그

 정규식 플래그를 사용해서 전역 검색, 대소문자 구분 없는 검색을 수행할 수 있습니다. 일반적으로 다음 3개의 플래그가 가장 많이 사용된다.

 

플래그	설명
g	전역 검색 – 대응되는 문자 전부 검색
i	대소문자 구분 없는 검색
m	다중 행 검색

 

 

● 정규식이 자주 사용되는 사례

 전화번호, 우편번호, 계좌번호, 이메일 등 사용자로부터 입력받는 정보 중 반드시 특정 규칙이 존재하는 데이터가 있다. 정규식을 사용하면 사용자가 입력한 데이터가 올바른 형식으로 입력되었는지 쉽게 확인할 수 있다.

 

다음은 핸드폰 번호가 올바른 형식인지를 체크하는 정규식 이다.

 

//반드시 010으로 시작(^)하고, 그 다음 하이픈(-), 숫자 4자리,

//하이픈(-),숫자 4자리가 차례대로 입력된 형식

const regexp_moblie = /^(010)-\d{4}-\d{4}$/;

 

 

다음은 이메일 주소가 올바른 형식인지를 체크하는 정규식 이다.

 

const regexp_email = /^([a-z]+\d*)+(\.?\w+)+@\w+(\.\w{2,3})+$/;

 

^([a-z]+\d*)+

: 반드시 알파벳 소문자([a-z])로 시작(^)하고 숫자는 0회 이상(*) 존재

 

(\.?\w+)+

: 점(.)은 없거나 1번만 사용할 수 있고(?), 뒤에 하나 이상의 문자(\w)가 존재

 

@\w+

: 반드시 @가 있고, \w+ 하나 이상의 문자가 존재

 

(\.\w{2,3})+$

: 점(.)과 2~3개의 문자가 1회 이상 반복되어 종료($)한다는 것을 의미

 

 

 

이걸 다 외워야 하나 했는데.. 몇개 예시 짜보면서 이해가 되면 그냥 여기서 복붙해서 갖다 쓰는게 빠를듯하다.