기본 setting
npm init -y npm parcel-bundler -D
index.html
head src main.js body h1 hello script dev run 추가 parcel bundler 버전 문제가 생긴다면 -> npm i parcel-bundler@1.12.3 -D
README.md 생성
정규표현식
문자열 검색하고 대체하는데 사용가능한 일종의 형식언어(패턴)
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 빠르게 수행 가능
정규표현식 테스트 사이트
https://regxr.com/
생성 방식 두 가지
1) 생성자
2) 리터럴
1) 생성자
new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi')
줄바꿈 하는 법 (백깃), 정규표현식이랑 관련 X
const str = `hello world`
정규식을 어떤 패턴으로 검색할 수 있을까
const str = ` 010-324-234 asdf@gmail.com https://omdbapi.com/?apikey the hello world abccccdddd `
정규표현식
const regexp = new RegExp('the', 'g') str.mathc(regexp) 결과: 배열데이터로 출력 / the라는 단어 찾아서 배열로 만들어줌
플래그 (옵션)
두번째 옵션 'g' 플래그 = 조건 해당하는 모든 데이터 출력 두번째 옵션 'gi' 플래그 = 대문자 소문자 가리지 않고 모두 출력
2) 리터럴 (편함)
/표현/옵션 /[a-z]/gi
정규식을 어떤 패턴으로 검색할 수 있을까
const regexp = /the/gi str.match(regexp)
정규식을 활용한 메소드
정규식.test(문자열) : 일치여부 boolean 반환 문자열.match(정규식) : 일치하는 문자열의 배열(array) 반환 문자열.replace(정규식, 대체문자) : 일치하는 문자열을 대체하고 대체된 문자열(String) 반환
const regexp = /fox/gi regexp.test(str) str.replace(regexp, 'AAA')
g = 모든 문자 일치 (global) i = 영어 대소문자를 구분 않고 일치 (ignore case) m = 여러 줄 일치 (multi line)
const regexp = /the/gi str.match(/\.$/gim) \ = 점(.)은 원래하나의 명령으로 해석되는데 만약 문자로 원하면 이스케이프 문자\ 추가 $ = $ 앞에있는 단어로 해당하는 줄이 끝나는 부분 찾아서 끝나는 부분 일치시킴 m = m이 없다면 문자열 가장 마지막에 점이 있어야하는데 m있으면 중간 점에서 일치 가능
g VS m 차이
g = 전체 영역에서 검색
m = 하나의 문자 데이터는 시작과 끝이 하나인데, 줄바꿈이 되어있으면 줄바꿈마다 해석 (각각의 줄을 시작과 끝으로 보겠다는 뜻)
/여기에 들어가는게 패턴/
^ab : 줄 시작에 있는 ab와 일치 ab$ : 줄 끝에 있는 ab와 일치
str.match(/d$/gm) // 마지막 줄 d 그 위치에 일치 "d" 두 개 출력 str.match(/^t/gm) // 시작점에 찾아지면 일치 T출력
. : 임의의 한 문자와 일치 a|b : a 또는 b와 일치 ab? : b가 없거나 b와 일치 *마크다운 a|b = a|b
str.match(/h..p/g) str.match(/h..p/g) str.match(/fox|dog/g) str.match(/https?/g) // ?앞 하나가 있을수도 없을수도 -> http, https 다 가능
{3} : 3개 연속 일치 {3,} : 3개 이상 연속 일치 {3,5} : 3개 이상 5개 이하 연속 일치
str.match(/d{2}/g) str.match(/d{2,}/g) str.match(/d{2,3}/g) str.match(/\w{2,3}/g) // 숫자 알파벳 포함 2~3개 문자열 출력 str.match(/\b\w{2,3}\b/g) // 숫자 알파벳 2~3 단어로 찾을 수 있음(경계 설정)
[abc}] : a 또는 b 또는 c [a-z] : a부터 z사이의 문자 구간에 일치 (영어 소문자) [A-Z] : A부터 Z사이의 문자 구간에 일치 (영어 대무자) [0-9] : 0부터 9사이의 문자 구간에 일치 (숫자) [가-힣] : 가부터 힣 사이의 문자 구간에 일치 (한글)
str.match(/[fox]/g) // fox와 상관없이, f,o,x단위로 출력 str.match(/[0-9]{1,}/g) // 숫자 하나이상이 연속 str.match(/[가-힣]{1,}/g)
\w : 63개 문자(Word, 대소영문52개 + 숫자 10개 + _)에 일치 \b : 63개 문자에 일치하지 않는 문자 경계 (boundary) \d : 숫자(digit)에 일치 \s : 공백(space, tab 등)에 일치
str.match(/\bf\w{1,}\b/g) // f로 시작하는 단어 str.replace(/\s/g, '') // 공백 삭제
(?=) : 앞쪽 일치 (lookahead) (?<=) : 뒤쪽 일치 (lookbehind)
str.match(/.{1,}(?=@)/g) 골뱅이 앞 전부 출력 str.match(/.(?=@).{1,}/g) 골뱅이 뒤 전부 출력