일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- map
- foreach
- js CRUD
- 야놀자 fe 1기
- 퍼블리셔 이직후기
- sqld 55회
- react hook
- git
- 야놀자x패스트캠퍼스
- 프론트엔드개발자
- 국비지원취업
- Where
- TypeScript
- 부트캠프 취업후기
- 성능개선
- 패스트캠퍼스
- github
- reduce
- firebase rules
- 리액트오류
- 국비지원
- css 꿀팁
- 프론트엔드부트캠프후기
- 패스트캠퍼스 부트캠프
- 부트캠프
- sqld 자격증 시험
- 2024 sqld
- promise 비동기처리
- Firebase
- Filter
- Today
- Total
Tech is created to fix problem
[Javascript 알짜개념] 정규표현식 기본 문법과 패턴 연습 본문
정규표현식을 쓰는 이유?
- 문자 검색(Search)
- 문자 대체(Replace)
- 문자 추출(Extract)
정규표현식 기본 방식
// 생성자 방식
new RegExp('표현', '옵션')
new RegExp('[a-z]', 'gi')
// 리터럴 방식
/표현/옵션
/[a-z]/gi
정규표현식 메소드
정규식.test(문자열) - 일치 여부 반환
문자열.match(정규식) - 일치하는 문자의 배열 반환
문자열.replace(정규식, 대체문자) - 일치하는 문자를 대체
정규표현식 플래그
g : 모든 문자와 일치 (Global)
i : 영어 대소문자를 구분하지 않고 일치 (Ignore case)
m : 여러 줄 일치 (Multi line), 각각의 줄을 시작과 끝으로 인식
정규표현식 패턴
// 정규표현식(RegExp, Regular Expression)
^ab | 1줄(Line) 시작에 있는 ab와 일치
ab$ | 1줄(Line) 끝에 있는 ab와 일치
. | 임의의 한 문자와 일치
a|b | a 또는 b와 일치
ab? | b가 없거나 b와 일치
{3} | 3개 연속 일치
{3,} | 3개 이상 연속 일치
{3,5} | 3개 이상 5개 이하(3~5개) 연속 일치
+ | 1회 이상 연속 일치, {1,} 과 동일
[ab] | a 또는 b
[a_z] | a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z] | A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9] | 0부터 9 사이의 문자 구간에 일치(숫자)
[가-힣] | 가부터 힐 사이의 문자 구간에 일치(한글)
\w | 63개 문자(Word, 대소영문52개+숫자10개+ _)에 일치
\b | 63개 문자에 일치하지 않는 문자 경계(Boundary)
\d | 숫자(Digit)에 일치
\s | 공백(Space, Tab 등)에 일치
(?:) | 그룹 지정
(?=) | 앞쪽 일치(Lookahead)
(?<=) | 뒤쪽 일치(Lookbehind)
어떠한 비밀 암호를 배운 느낌이다.
보편적으로 많이 쓰는 정규표현식 예제를 풀어봐도 좋을 것 같다.
전화번호 XXX-XXXX-XXXX 하이픈으로 구분하기 혹은 주민번호 잘 입력되었는지 등등!!
그리고 정규표현식이 js 언어가 아니라! 모든 언어에 기본적으로 사용되어지는 표현식이라는 것을 처음 알게 되었다.
그렇다면 앞으로 사용자로부터 입력을 받을 때, 정규표현식이 많이 사용될 것 같다고 생각했다.
연습예제
const str = `
010-1234-5678
thesecon@gmail.com
Hello world!
https://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
hello@naver.com
http://localhost:1234
동해물과 백두산이 마르고 닳도록
abbcccddddeeeee
`
1. .com으로 끝나는 문자열을 찾아내라!
console.log(str.match(/\.com$/gm))
[풀이]
str.match(문자열) : 일치하는 문자를 배열로 반환
\. : .은 임의의 한 문자와 일치한다는 기능을 가지고 있는데 그것을 무시하고 문자로 인식하게 함
com$ : com으로 끝나는 문자를 반환
g : 모든 문자에서 찾도록 함
m : 줄바꿈을 기준으로 줄을 기준으로 시작과 끝을 지정함 (m 을 붙여주지 않으면 com$ 이것을 찾을 수 없음!!)
2. 숫자 중 3번 이상 ~ 9번 이하 반복하는 숫자를 찾아라
console.log(str.match(/\d{3,9}/g))
[풀이]
\d : 디지털 숫자에 일치하는지 찾음
{3,9} : 3개 이상 9개 이하 연속으로 일치하는지 찾음
3. 모든 소문자에서 연속하는 단어를 찾아라
console.log(str.match(/[a-z]+/g))
[풀이]
[a-z] : a에서 z사이의 문자 구간에 일치
+ : {1,} 과 같은 역할. 1개 이상 연속 일치
'JS 개념정리' 카테고리의 다른 글
[Javascript 알짜개념] 프로토타입, ES6 Class 문법 (0) | 2023.08.07 |
---|---|
[Javascript 알짜개념] 함수, 호이스팅, this (0) | 2023.08.06 |
[Javascript 알짜개념] 콜 스택, 테스크 큐, 이벤트 루프 (0) | 2023.08.06 |
[Javascript 알짜개념] 가비지 컬렉션, 클로저 함수 (0) | 2023.08.03 |
[Javascript 알짜개념] 불변성과 가변성, Symbol, BigInt (0) | 2023.08.03 |