정규 표현식 Regular expressions

티스토리 첫 글이다.

블로그를 자주 이사하는 것이 좋은 것은 아니라고 들었으나, 벨로그에서 티스토리로 이사 온 이유는 벨로그보다 가독성이 좋게 느껴졌고, 사람들이랑 소통하기 더 좋다고 생각했다. 티스토리에 찍히는 Total 보면 한 명이라도 이 블로그를 지켜본다는 생각에 조금 더(?) 정확하게 공부하고 글을 쓰려고 노력할 것 같다는 생각.. 을 해봤다. 아무튼 시작!

 

정규 표현식은 DOM을 이용해 로그인 창을 구현할 때, 처음 배웠다. DOM이 더 혼란스러워서 조금 얕게 공부를 했더니, 어제, 오늘 진행했던 스프린트에서 match() 함수를 매개변수로만 구현해 더 꼬이는 상황이 발생했다. 그래서 늦게나마 블로깅으로 공부한 내용을 정리하려고 한다.

 

정규 표현식

한마디로 문자를 표현하는 식이다. 즉, 문자열의 특정 문자 조합과 대응시키기 위한 패턴이다.

String, match, replace, search 등의 메소드와 함께 쓰인다.

 

정규 표현식을 만드는 방법엔 2가지가 있다.

1.  정규식 리터럴 ( "/"로 감싸 사용)

2. Regexp 객체의 생성자 함수 호출

 

Character	Meaning
/	문자 그대로 해석하면 안된다는 의미로 식을 감싸 정규 표현식으로 만들 수 있다.
^	문자열의 시작 (^A => A로 시작된다)
$	문자열의 끝 (B$ => B로 끝난다)
*	앞의 표현식이 0회 이상 반복
+	앞의 표현식이 1회 이상 반복
?	앞의 표현식 존재 여부
.	.n => n으로 끝나는 문자
(x)	그룹 (포획 괄호)
(?:x)	집합에 대한 예외, 기억 X (비포획 괄호)
x(?=y)	y가 뒤에 따라오는 x만
x(?!y)	x뒤에 y가 없는 경우
x|y	or
{n}	앞의 표현식이 n번 나타는 부분 (a{2} => a가 2번)
{n,m}	앞의 표현식이 최소 n번, 최대 m번
{n,}	앞의 표현식이 n번 이상

 

 

Character	Meaning
[xyz]	문자셋 (x|y|z)
[a-z]	a부터 z까지
[^xy]	not, (x&y제외)
[\b]	백스페이스
\b	단어 경계, 문자와 문자 사이의 공백
\B	단어 경계 제외, 문자와 문자 사이 공백 아닌 문자
\d (=[0-9])	숫자 문자
\D (=[^0-9])	숫자 문자가 아닌 문자
\n	줄바꿈
\s	공백 하나의 문자
\S	공백 문자가 아닌 하나의 문자
\t	tab 탭
\v	수직 탭
\w (=[A-Za-z0-9_])	알파벳+숫자+밑줄(_)
\W (=[^A-Za-z0-9_])	알파벳+숫자+밑줄(_)가 아닌 문자

Character	Meaning
g	전역 검색
i	대소문자 구분 X
m	다중 라인 문자 검색

 

ex.

‣ 한글 코드 - /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ 

‣ 숫자 - /[0-9]/g

‣ 이메일 - /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

‣ 모든 공백 - /\s/g

‣ 전화번호 - /^\d{3}-\d{3,4}-\d{4}$/

‣ 핸드폰 번호 - /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/

‣ URL - ^(https?):\/\/([^:\/\s]+)(:([^\/]*))?((\/[^\s/\/]+)*)?\/?([^#\s\?]*)(\?([^#\s]*))?(#(\w*))?$

---

Ref.

▪️ "정규 표현식", mdn ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions )

▪️  "정규 표현식", 모리스 소프트웨어 공작소 ( https://ccambo.blogspot.com/2014/10/regular-expression.html )

▪️  정규 표현식 설명 ( https://regexr.com/ )

▪️  정규 표현식 사용 ( https://regexper.com/ ) 사례들을 입력해보면 도식화를 볼 수 있다. 정규 표현식을 이해하기 좋은 듯하다.