티스토리 뷰
목차
이전 포스트에서 Input value를 이용한 예제를 만들던 도중
정규표현식을 알게 되었다.
이번 주제도 같은 채널에서 정보를 얻게 되었다.
정규표현식
정규표현식은 문자를 효율적으로 탐색할 수 있는 방식이다.
오 책까지 나와있다.
구성
/regex?/i
// ' / ' slash를 이용하여 정규표현식을 열고, 닫는다.
// slash 사이에 찾고하고자 하는 패턴을 기입한다.
// slash 뒤로 옵션(flag)를 설정 할 수 있다.
패턴
정규식을 구성하는 특수문자를 정리하였다.
양이... 많다.....
|
/apple|banana/g
if문에서 or로 쓰이는 이 문자는
여기에서도 or로 통용된다.
앞의 패턴과 뒤의 패턴 둘 다 찾아준다.
()
/Mi(ke|x)/g
괄호 안에 있는 패턴을 그룹으로 묶는다.
괄호 '()'안의 문자를 포함하여 검색한다
예제에서는
Mike or Mix가 검색되는 것이다.
[]
/M[abcde]Me/g
바로 위의 괄호 '()'와 비슷한 개념으로
대괄호 '[]'안의 문자를 포함하여 검색한다
예제에서는
MaMe MbMe Mcme MdMe MeMe가 검색된다.
-
/[a-f]/g
-는 두 문자 사이에 있는 문자를 포함한다.
예제를 풀어서 쓰면 다음과 같다
/[abcdef]/g
^
/[^0-9]/g
^는 if에서 not( ! )과 같다.
예제에서는
문자 0~9를 제외한 모든 문자를 검색한다.
?
/ch?oco/g
? 는 바로 앞 글자가 있거나 없는 문자를 검색한다.
예제에서는
h가 있든 없든 검색하여,
coco / choco 두 글자 모두 검색한다.
+
/cho+co/g
+는 바로 앞의 글자가 하나 이상 존재하는 것을 검색한다.
예제에서는
choco chooco choooco chooooco 모두 검색한다.
*
/cho*co/g
*는 앞서 말했던 ? 와 +의 기능을 다 합친 것으로,
바로 앞의 글자가 없거나, 하나 이상 존재는 문자를 검색한다.
에제에서는
chco choco chooco choooco 모두 검색한다.
{}
/cho{2,4}co/g
'{}'는 앞서 말한 ? + * 기능을 커스터마이징 하는 표현식이다.
/cho{2}co/g
이렇게 괄호 사이에 숫자 하나만 적는다면
해당 숫자만큼 글자 수가 있는 문자를 검색한다.
/cho{2,4}co/g
위의 예제처럼 두 개를 쓰면,
앞에 숫자는 최솟값, 뒤의 숫자는 최댓값을 뜻한다.
죽 예제에서는
o가 2개에서 4개 존재하는
chooco choooco chooooco를 검색한다.
/cho{2,}co/g
최댓값을 공백으로 두면 최소량 이상인 문자 모두 검색한다.
/cho{0,4}co/g
반대로 최솟값을 지정하고 싶지 않다면,
최솟값에 0을 두면 된다.
\b
/\bco/g
\b는 해당 표현식이 단어 앞 / 뒤에 있을 시 검색해준다.
\b를 앞에 둘시
/\bco/g
앞에 co가 붙는 단어를 검색하고,
/co\b/g
\b를 뒤에 둘 시
끝에 co가 붙는 단어를 검색한다.
\b를 대문자인 \B로 변경하면
/\Bco/g
앞에 있을시,
단어 앞에 있는 co를 제외한 co를 검색한다.
/co\B/g
뒤로 옮기면,
단어 뒤에 있는 co를 제외한 co를 검색한다.
^
/^co/g
대괄호 '[ ]'안이 아닌 ^는
줄의 처음에 오는 해당 문자를 검색한다.
문장의 처음이라 되어있는데,
마침표로 구분이 안 되는 것 보니,
줄의 처음이라 하는 게 좋겠다.
$
/co$/g
^의 반대로
줄의 마지막에 오는 해당 문자를 검색한다.
.
/./g
개행(줄 바꿈) 문자를 제외한 모든 문자를 검새한다.
\
/\./g
\ 다음 특수문자를 입력하면 특수문자가 기능하지 않고,
특수문자 자체를 검색한다.
웬만한 언어에서 똑같은 기능을 하니 기억해두자.
/d
/\d/g
digital number
즉 0~9 숫자를 검색한다.
/\D/g
대문자로 쓰면
숫자를 제외한 모든 문자가 검색된다.
/w
/\w/g
word 즉 글자를 검색한다.
특수문자를 제외한 숫자와 글자를 검색한다.
/\W/g
이 또한 대문자로 검색하면 반대로 검색한다.
/s
/\s/g
space 공간 즉 띄어쓰기 문자를 검색한다.
/\S/g
대문자로 쓰면 띄어쓰기를 제외한 문자를 검색한다.
옵션(플래그)
Flag | 효과 |
g | 하나이상의 결과 검색 |
i | 대소문자 구분없이 검색 |
m | 여러줄에서 검색 |
s | 줄바꿈문자(개행문자)도 검색에 포함 |
y | 현재위치에서부터 검색 |
u | 유니코드 검색 |
끝
'웹개발(프론트)' 카테고리의 다른 글
시간표현 (0) | 2021.05.06 |
---|---|
이쁜 코드를 짜는 규칙 (0) | 2021.04.29 |
redux 데이터 여러개 수정하기 (0) | 2021.04.27 |
Imported JSX component text must be in PascalCase or SCREAMING_SNAKE_CASE (0) | 2021.04.26 |
일러스트로 path 그리기 (0) | 2021.04.23 |
- Total
- Today
- Yesterday
- 접근성
- nodejs
- dom
- touchable
- 이쁜코드
- SVG
- 비동기
- 아이콘
- visualcode
- CSS
- 무료아이콘
- react
- switch
- Router
- Hook
- usecookies
- useReducer
- 서버
- async
- Redux
- html
- 에러
- 가상샐렉터
- 쿠키
- homebrew
- proptype
- Expo
- 랜더링
- 클릭
- 웹접근성
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |