일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Props
- CSS
- 노마드코더
- 패스트캠퍼스
- js
- 캡슐화
- 자바스트립트
- 클래스
- Fetch
- 추상화
- JavaScript
- 불변성
- REACT
- 리액트
- OOP
- 부트캠프
- 자바스크립트
- 논리연산자
- 투두앱만들기
- typeScript
- 상속
- 웹개발
- Hooks
- webdevelopment
- github
- 타입스크립트
- frontend
- 객체지향프로그래밍
- 프론트엔드
- Zustand
Archives
- Today
- Total
connecting dots
정규표현식 본문
https://heropy.blog/2018/10/28/regexp/
정규표현식, 이렇게 시작하자!
매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다)
heropy.blog
정규식. regular expression
## 역할
- 문자 검색
- 문자 대체
- 문자 추출
## 테스트 사이트
http://regexp.com/
## 블로그 사이트
https://heropy.blog/2018/10/28/regexp/
## 정규식 생성
// 생성자
new RegExp("표현", "옵션");
new RegExp("[a-z]", "gi"); // a-z 영어 소문자 검색, g(일치하는 모든 내용 검색) i(대문자 소문자 구분 안하겠다)
// 리터럴
/표현/옵션
/[a - z]/ gi;
const str = `
010-1234-1234
thesecon@gmail.com
http://www.omdbapi.com/?apikey=7035c60c&s=frozen
The quick brown fox jumps over the lazy dog.
abbcccdddd
`;
## 메소드
메소드 | 문법 | 설명 |
test | `정규식.test(문자열)` | 일치여부(boolean) 반환 |
match | `문자열.match(정규식)` | 일치하는 문자의 배열(array) |
replace | `문자열.replace(정규식, 대체문자)` | 일치하는 문자를 대체 |
## 플래그(옵션)
플래그 | 설명 |
g | 모든 문자 일치(global) |
i | 영어 대소문자를 구분 않고 일치(ignore case) |
m | 여러 줄 일치(multi line) = 줄바꿈이 되어져 있는 각각의 줄을 시작/끝으로 해석하겠다는 말. 각 줄을 하나의 시작과 끝으로 보겠다는 선언. |
### 예시
console.log(regexp.test(str));
console.log(str.replace(regexp, "AAA"));
console.log(str.match(/the/gi))
console.log(str.match(/\.$/gim)) (m 안붙이면 null)
(\: 이스케이프 문자, 특정 기능으로 동작하는 것을 탈출해서 문자로 해석되라고 붙여주는 것)
($: $ 앞에 있는 하나의 단어로 그 해당하는 줄이 끝나는 부분을 찾아서 끝나는 부분을 일치시킨다 )
## 패턴(표현)
패턴 | 설명 |
^ab | 줄(line) 시작에 있는 ab와 일치 |
ab$ | 줄(line) 끝에 있는 ab와 일치 |
. | 임의의 한 문자와 일치 |
a|b | a 또는 b와 일치 |
ab? | b가 없거나 b와 일치 |
{3} | 3개 연속 일치 |
{3,} | 3개 이상 연속 일치 |
{3,5} | 3개 이상 5개 이하 연속 일치 |
[abc] | a 또는 b 또는 c |
[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 등)에 일치 |
(?=) | 앞쪽 일치 |
(?<=) | 뒤쪽 일치 |
### 예시
console.log(
str.match(/d$/g) // 한 줄의 끝부분이 d면 그 부분이 찾아짐, null. m추가해주면 됨.
);
console.log(str.match(/^t/gm)); // i 붙이면 두개
console.log(str.match(/./g)); // 대부분 일치
console.log(str.match(/h..p/g));
console.log(str.match(/dog|fox)) // 둘 중에 먼저 찾아지는 걸 반환
console.log(str.match(/\b\w{2,3}\b/g)) // 숫자를 포함한 알파벳이 두번 이상 3번 이하 반복되는 단어 모두 찾음
console.log(str.match(/.{1,}(?=@)/g))
// .{1,}: 최소 1개 이상의 문자와 일치.
// • (?=@): @ 앞에 있는 문자들만 일치(전방 탐색).
반응형
'Online Class > DevCamp' 카테고리의 다른 글
웹 앱의 구성요소, 모던 Javascript와 개발 환경 (0) | 2024.07.16 |
---|---|
React | 리액트 기본 (5) | 2024.07.16 |
JS 데이터 | 문자 (String. ~), 숫자 (Math. ~), 배열(Array. ~) (0) | 2024.06.13 |
JS 클래스 | 생성자 함수(prototype), this, ES6 classes, 상속(확장) (0) | 2024.06.12 |
Git | 마크다운(Markdown) (0) | 2024.06.12 |