JavaScript (8)

JavaScript (8) : 정규표현식 in JS

1. 정규식 생성

기본 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)

3. 메소드

정규식을 활용한 메소드

정규식.test(문자열) : 일치여부 boolean 반환
문자열.match(정규식) : 일치하는 문자열의 배열(array) 반환
문자열.replace(정규식, 대체문자) : 일치하는 문자열을 대체하고 대체된 문자열(String) 반환

const regexp = /fox/gi
regexp.test(str)
str.replace(regexp, 'AAA')

4. 플래그 (옵션)

g = 모든 문자 일치 (global)
i = 영어 대소문자를 구분 않고 일치 (ignore case)
m = 여러 줄 일치 (multi line)

const regexp = /the/gi
str.match(/\.$/gim)
\  = 점(.)은 원래하나의 명령으로 해석되는데 만약 문자로 원하면 이스케이프 문자\ 추가
$  = $ 앞에있는 단어로 해당하는 줄이 끝나는 부분 찾아서 끝나는 부분 일치시킴
m  = m이 없다면 문자열 가장 마지막에 점이 있어야하는데 m있으면 중간 점에서 일치 가능

g VS m 차이
g = 전체 영역에서 검색
m = 하나의 문자 데이터는 시작과 끝이 하나인데, 줄바꿈이 되어있으면 줄바꿈마다 해석 (각각의 줄을 시작과 끝으로 보겠다는 뜻)

5. 패턴 (표현)

/여기에 들어가는게 패턴/

---

^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) 골뱅이 뒤 전부 출력