Javascript 정규 표현식

Jungmin Lee·2021년 11월 29일
2

javascript

목록 보기
4/4

정규 표현식은 저에겐 너무나 난해하고 어려워 보여 공부해 볼 엄두도 나지 않았는데 프로그래머스 알고리즘 문제를 풀던 도중 엄청난 하드 코딩으로 문제는 풀었지만 다른 분들의 풀이를 보니 대부분 정규 표현식을 이용하여 간단히 푼것을 확인하고 좌절을 했습니다ㅠㅠ
그래서 정규 표현식을 조금이나마 공부를 해보자는 생각을 하고 관련된 자료를 찾던 도중 운 좋게 드림코딩 엘리님의 동영상 강의 영상을 보고 정규 표현식에 눈을 뜨게 되었습니다.
혹시 아직 정규 표현식에 도전 해보지 못하신 분들이라면 생각보다 어렵지 않으니 한번 도전해보시길 바랍니다.

정규 표현식이란

1950년 stephen cole kleene 의해 개발 되어졌습니다.
유닉스 계열에서 사용되다가 이제는 다양한 프로그래밍 언어에서 내부적으로 지원하고 검색도 가능해졌습니다.
정규 표현식은 텍스트에 우리가 원하는 특정한 패턴을 찾을 때 용이합니다.
그리고 그 패턴을 찾아서 다른 문자열로 변경도 가능합니다.
예) 전화번호 형태, 웹 사이트 형태, 특수문자 구분, 사용자 이메일 or 패스워드 유효성 검사 등등..
정규 표현식 사용법을 간단히 설명해드리자면
예) /regex?/gm
슬래쉬로 정규 표현식이라고 나타내 주고 슬래쉬 안에 패턴(pattern)을 작성해주면 됩니다.
그리고 어떤 옵션(flag)을 가지고 이용할건지 슬래쉬 뒤에 작성해주면 됩니다.

그럼 간단한 정규 표현식 예제 몇개만 살펴 보겠습니다.

정규 표현식 예제

1. 모든 공백을 검색

/\s/gm

해당 사이트는 코드를 삽입하면 코드 검색 결과와 어떻게 검색 되었는지 하단에 나와서 정규 표현식 공부하기 아주 좋은 사이트입니다. 관련 사이트는 하단에 나열 해두었습니다.

슬래쉬안에 있는 패턴을 해석해보면 \s 는 공백을 찾는 것이고 슬래쉬 밖에 flagglobalMulti line인데 전체의 모든열을 검색한다는 뜻입니다.

2. 숫자만 체크

/^[0-9]+$/gm

^: 시작,
[0-9]: 숫자,
+: 이상,
$: 문장의 끝

3. 전화번호 검색

/\d{2,3}[- .]\d{3,4}[- .]\d{3,4}/gm


슬래쉬안에 있는 패턴을 해석해보면 \d는 숫자를 나타내는 것이고 {2,3}은 최소, 최대값을 나타냅니다.
물론 1개만 작성해도 됩니다.
[]는 문자셋,괄호안에 어떤 문자든 검색하게 해주어 010-1234-1234 or 010.1234.1234
같이 특수 문자가 다르더라도 []안에 해당된 특수 문자가 있다면 찾아낼 수 있습니다.
즉, 밑에 정규 표현식을 해석해보면 2~3개 숫자를 찾고 []안에 있는 특수문자를 탐색하고
다시 숫자 3~4개를 찾고 []안에 특수문자를 검색하고 마지막으로 3~4개 숫자를 찾는 내용입니
다.

4. 이메일 검색

/^[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[.]{1}[A-Za-z]{1,5}$/gm

이메일 검색도 예시로 넣어뒀습니다.
혹시 궁금하시다면 밑에 정규표현식 용어를 정리해뒀는데 한번 찾아보면서 공부해 보시는 건 어떨가요?? (절대 설명하기 귀찮아서가 아닙니다ㅎㅎ)
하단에 정규 표현식에 관한 영상, 연습 사이트를 모아뒀으니 아직 감이 안오신다면 해당 영상을 시청 하시고 연습 사이트에서 연습 하시는 걸 추천드립니다!

정규 표현식에 사용되는 용어 정리

Groups and ranges

Chracter
()그룹
[]문자셋, 괄호안의 어떤 문자든
[^]부정 문자셋, 괄호안의 어떤 문가 아닐때
(?:)찾지만 기억하지는 않음

Quantifiers

Chracter
?없거나 있거나 (zero or one)
*없거나 있거나 많거나
(zero or more)
+하나 또는 많이 (one or more)
{n}n번 반복
{min,}최소 이상
{min,max}최소, 그리고 최대

Boundary-type

Chracter
\b단어 경계
\B단어 경계가 아님
^문장의 시작
$문장의 끝

Character classes

Chracter
\ 특수 문자가 아닌 문자
.어떤 글자 (줄바꿈 문자 제외)
\ddigit 숫자
\Ddigit 숫자 아님
\wword 문자
\Wword 문자 아님
\sspace 공백
\Sspace 공백 아님

플래그(plag)

Chracter
gglobal 모든 문자 검색
iIgnore Case 대소문자 구분 안함
mMulti line 여러 행의 문자열 검색

주요 메소드

Chracter
문자열.match(/정규표현식/플래그)global 모든 문자 검색"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환출
문자열.replace(/정규표현식/, 대체문자열)"정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
문자열.split(정규표현식)Multi line 여러 행의 문자열 검색"문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환
정규표현식.test(문자열)"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
정규표현식.exec(문자열)match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

정규 표현식 참고 사이트

정규 표현식 강의 영상(드림코딩 엘리)
정규 표현식 참고 사이트
정규 표현식 연습용 사이트
정규 표현식 퀴즈 사이트

profile
Front-end developer who never gives up.

0개의 댓글