일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 비동기 함수
- IndexedDB
- banner
- github
- 배열
- slide
- dnd-kit
- vite
- 슬라이더
- deploy
- react
- 배포
- HTTP
- 리액트배포
- 웹사이트
- Github Pages
- 렌더링
- React.js
- 인덱스된 데이터베이스
- array
- 배너 슬라이더
- javascript
- js
- 자바스크립트 배열
- 자바스크립트
- 리액트
- 웹
- 배너
- 웹스토리지
- 슬라이드
- Today
- Total
Somedding
정규 표현식(Regular expression)이란? 본문
위키백과에 의하면 정규표현식, 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.
정규표현식은 / 패턴 / 플래그 형태로 표현한다.
그래서 패턴과 플래그에 적절한 식(?)을 넣으면 문자열을 요리조리 잘 찾을 수 있다!!!
정규표현식의 매칭 패턴을 알아보자.
a-zA-Z 는 영어알파벳, ㄱ-ㅎ가-힣 은 한글.
0-9 는 숫자
. 은 모든 문자열(줄바꿈 제외)
\d 는 숫자, \D 는 숫자가 아닌 문자
\w 는 영어 알파벳, 숫자, _ , \W 는 \w가 아닌 문자
\s 는 공백, \S는 공백이 아닌 문자
\특수문자 는 특수문자
다음은 정규표현식의 검색 패턴을 알아보자.
| 는 '또는'을 의미하고 [ ] 는 괄호 안의 문자들 중 하나를 의미
[^ ] 는 괄호 안의 문자들을 제외한 문자들 중 하나
^문자열 는 특정 문자열로 시작, 문자열$ 는 특정 문자열로 끝
( ) 는 그룹 검색 및 분류(match 메서드에서 그룹별로 묶어줌)
(?: ) 는 그룹 검색 및 분류(그룹으로는 안묶음)
\b 는 단어의 처음/끝, \B 는 단어의 처음/끝이 아님을 의미
다음은 정규표현식의 개수 패턴을 알아보자.
? 는 최대 1개, * 는 있거나 없거나, +는 최소 1개를 의미
{n} 는 n개, {n,} 는 최소 n개, {n,m} 은 최소 n개 최대 m개를 의미한다.
마지막으로는 정규표현식 플래그에 대해서 알아보자
g는 global로 모든 문자를 검색하고 없으면 첫 문자만 검색한다.
i는 ignore Case로 대소문자 구분을 하지 않겠다는 것,
m은 multi line으로 여러 행의 문자열에 대해 검색한다는 것이다.
몇 가지 예시를 보면 어떻게 써야하는 지 감이 잡힐 것이다.
우선 전화번호 형식이다.
/^\d{3}-\d{3,4}-\d{4}$/
우선 / 패턴 / 라고 생각하면 ^\d{3}-\d{3,4}-\d{4}$를 알아보면 된다.
^라는 것은 뒤에 있는 문자열로 시작한다는 의미이고, \d는 숫자를 의미, {3}은 3개를 의미하므로
숫자 3개로 시작한다~라고 판단하면 되고,
중간에 -가 있으며 \d{3,4}는 숫자가 최소3개, 최대 4개가 온다는 것이다.
중간에 또 -가 있으며 \d{4}$는 숫자 4개이지만, $로 앞에 오는 문자열로 끝난다는 소리이다.
그 다음은 url 형식을 보자.
/https?:\/\/[\w\-\.]+/g
안에 패턴만 보도록 하자
괄호는 안에 문자열을 그룹으로 묶어 준다. 안에서는 s 뒤에 ?가 있으니 s는 최대 1개까지 가능하므로
http나 https로 시작하는 문자열인 셈이다.
그 다음엔 :가 오는 것이고 \/\/는 특수문자 /가 2개 온다는 소리이다.
[\w\-\.]는 영어 알파벳, 숫자, _가 있는 문자, -, .이 있는 문자열을 선택한다는 것다.
패턴은 끝이 나고, 플래그로는 g가 왔는데 모든 문자에서 탐색한다는 의미이다.
참고
- https://ko.wikipedia.org/wiki/정규_표현식
- https://curryyou.tistory.com/234
글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!
모두 좋은 하루 보내세요:)
'기타' 카테고리의 다른 글
Mac에서 Node.js 설치하기 (0) | 2023.05.19 |
---|---|
UX / UI (0) | 2023.05.08 |
React.js란? (0) | 2023.02.20 |
적응형? 반응형?? (0) | 2023.02.17 |
라이브러리 vs 프레임워크 (0) | 2023.02.13 |