[Javascript] 이번에야말로 regex를 써보자

✨Regex란?

Regular Expressions의 준말이다.

정규 표현식, 또는 정규식이라고도 하며 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.

 

보통 회원가입 시에 아이디나 비밀번호, 이메일과 같은 정보를 유효성 검사할 때 많이 사용한다.

문자열로 고통받는 이들을 위한 구세주 같은 존재이다.

🔍정규표현식 알아보기

Groups and ranges

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

Quantifiers

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

Boundary-type

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

Character classes

\	특수 문자가 아닌 문자
.	어떤 글자 (줄바꿈 문자 제외)
\d	digit 숫자
\D	digit 숫자 아님
\w	word 문자
\W	word 문자 아님
\s	space 공백
\S	space 공백 아님

출처: https://github.com/dream-ellie/regex

 

🕹정규표현식 관련 자바스크립트 메서드

1. RegExp.prototype[@@match]()

정규표현식에 맞는 문자열을 찾아서 그룹별로 나눠서 배열로 리턴해준다.

 

2. RegExp.prototype[@@replace]()

정규표현식에 맞는 문자열을 원하는 문자열로 변환해준다.

 

3. RegExp.prototype.test()

정규표현식에 일치하는 문자열이 존재하면 true를 존재하지 않으면 false를 리턴한다.

 

이 세 가지 정도가 제일 자주 쓰이니 필수적으로 알아두면 좋다.

나머지 메서드는 호기심이 생긴다면 mdn에서 살펴보자.

🔮RegExr

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

 

정규표현식을 어려워하는 모든 이들을 이롭게 하기 위해 탄생한 정규표현식 최고 존엄 사이트.

 

 

Expression 창에 정규표현식을 작성하면

밑에 텍스트 창에서 정규표현식에 의해 선택된 문자열을 파란색 하이라이트로 보여준다.

 

하단 Tools에서 내가 작성한 정규표현식에 대한 Explain도 확인할 수 있으며

Replace 탭에서는 선택된 문자열들을 변환시켜볼 수도 있다.

 

왼쪽에 메뉴에는 RegEx Reference라는 게 있는데 정규표현식의 모든 것에 대해서 항목별로 설명해주고 있다.

원하는 게 있는데 기능이 떠오르지 않는다면 이 메뉴를 한번 쭉 살펴보면 도움이 된다.

 

👩🏻‍💻문제로 익혀보자

다른 방법으로도 풀 수 있는 문제들이지만 정규표현식으로 풀어야 그나마 편하다.

정규표현식을 익히려고 하는 것이니 꼭 정규표현식을 이용해서 풀이해보자

 

1. level1 / 핸드폰 번호 가리기

https://school.programmers.co.kr/learn/courses/30/lessons/12948

 

뒤에 4자리 빼고 문자열을 선택해서 *표시로 바꿔주면 된다.

힌트를 주면 ?=와 \d를 이용해서 풀어보자.

 

 

▶문제풀이 해설

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

 

2. level1 / 신규아이디추천

https://school.programmers.co.kr/learn/courses/30/lessons/72410

 

 

대놓고 정규표현식을 강요하는 문제.

정규표현식을 사용하지 않으면 매우 어려워진다.

 

순서대로 단계를 잘 나누어서 풀어보면 해결할 수 있는 문제

단계가 많긴 해도 하나하나 차근차근 풀면 된다.

 

▶문제풀이 해설

 

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

 

3. level1 / 옹알이(2)

https://school.programmers.co.kr/learn/courses/30/lessons/133499

 

사실은 level1이 아닌 문제.

어려운 게 맞으니까 오해하지 말자.

 

replace를 이용해서 선택한 문자열을 삭제해서 아무것도 안 남았을 때 카운팅을 하거나

RegExp.test를 이용해서 문제에 주어진 두 가지 조건을 모두 충족했을 때 카운팅을 해도 좋다.

 

▶문제풀이 해설

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

 

4. 백준알고리즘 17413번 단어 뒤집기 2

https://www.acmicpc.net/problem/17413

 

태그를 건드리지 않고 문자열을 뒤집어주어야 한다.

match를 이용해서 그룹별로 나누어 준 다음에

태그 내부에 있는 문자열에 해당하는 부분만 뒤집어 주면 된다.

 

▶문제풀이 해설

문제 해설은 python으로 되어 있지만 정규표현식은 동일하게 사용 가능하니 참고해도 좋다

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

 

🤗참고하면 좋을 자료들

▶ 드림코딩 엘리 정규표현식

 

정규표현식에 대해서 전체적으로 알아볼 수 있어서 이 영상을 제일 먼저 보면 좋을 것 같다.

 

▶ 드림코딩 엘리 regex github 자료

GitHub - dream-ellie/regex

 

▶ MDN 정규표현식

정규 표현식 - JavaScript | MDN