일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- scroll
- For
- 애니메이션
- 반복문
- addEventListener
- NAV
- getBoundingClientRect
- React
- input
- 확장성
- Animation
- localstorage
- mousemove
- NodeList
- swiperjs
- insertAdjacentHTML
- 이벤트리스너
- Hover
- classList
- pointermove
- css
- JavaScript
- scrollY
- width
- scrollevent
- 스크롤
- Sticky
- forEach
- swiper
- html
- Today
- Total
ZeroToHunnit Coding
[Javascript] 정규식 알아보기 본문
- 정규식이란?
정규식은 문자열에서 특정 문자를 찾기 위한 것이다. 즉 어떤 문장에 특정 문자가 포함되어있는가를 파악할 수 있다는 뜻이다.
- includes()
includes함수는 영어 뜻 그대로 포함되어 있는가를 파악해준다. 하지만 단순히 포함되어 있는지만 파악하기 때문에 한계점이 많다는 단점이 있다.
ex) 'abc'.includes('a') >> true 반환 / 'abc'.includes('d') >> false 반환
- test()
test함수는 정규 표현식을 만족하는지 판별해준다. /포함문자여부/.test('검사할 문자')의 문법을 가진다.
ex) /^a/.test('abc') >> true 반환 (//안에 ^a는 a로 시작하냐라는 의미이다.)
/[a-z]/.test('abc') >> true 반환 ([a-z]는 소문자 a부터 z 모든 소문자 알파벳 범위, 대문자, 한글도 범위 지정 가능)
/a$/.test('abc') >> false 반환 (//안에 a$는 a로 끝나냐라는 의미이다.)
/ \ S/.test('abc') >> true 반환 ( \S는 특수문자를 포함한 모든 문자를 의미한다.)
위와 같이 정규식을 표현하는 문자들이 상당히 많다. 그 문자들로 이메일, 전화번호 등을 작성할 때 양식에 맞게 정규식으로 검사할 수 있다.
이메일 형식으로 예를 하나 들자면 ...
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
정규식 출처: https://emailregex.com/
위와 같은 정규식으로 이메일 형식을 검사할 수 있다. 상당히 복잡하긴 하지만 세상에는 많은 아이디, 이메일 주소가 존재하기 때문에 완벽한 정규식은 없지만 최대한의 경우의 수를 검사한 정규식이라고 할 수 있다. 이런 정규식들은 많은 경우의 수를 다 생각해서 직접 짜도 무방하지만 너무 힘들기 때문에 구글에 검색해보면 많은 경우의 수를 따진 정규식이 잘 나와있기 때문에 정규식 공부 후 해석하고 이해해서 사용하는 방법이 제일 좋을 것 같다.
'JAVASCRIPT' 카테고리의 다른 글
[Javascript] 다양한 기능들로 만든 멋진 scroll이벤트 (0) | 2024.01.04 |
---|---|
[Javascript] 현재 스크롤 퍼센트를 나타내주는 bar (2) | 2024.01.03 |
[Javascript] 타이핑 애니메이션 (2) | 2024.01.01 |
[Javascript] 커서따라 3d느낌으로 움직이는 카드 (0) | 2023.12.31 |
[Javascript] 특정 위치에서 div 속성 바꾸기 (0) | 2023.12.29 |