[JS] 정규 표현식 (정규식, RegExp)

📌 정규 표현식이란?

문자 검색 / 문자 대체 / 문자 추출하는 용도로 쓸 수 있는 패턴

 

📌 어떻게 만들지?

1. 생성자

new RegExp('표현', '옵션')

예시)

const regexp = new RegExp('the', 'g')
console.log(str.match(regexp)) //str문자열에서 the와 일치하는 것을 찾아줌

옵션)

'' : 첫 번째 일치하는 것만 찾음

g : 정확히 일치하는 모든 것들 찾음

i : 대소문자를 고려하지 않고 일치하는 것들 찾음

m : 여러 줄 일치, 각각의 줄을 시작과 끝으로 인식

 

2. 리터럴 (더 많이 사용)

/표현/옵션

예시)

const regexp = /the/gi
console.log(str.match(regexp)) //console.log(str.match(/the/gi)) 로 써도 ㄱㅊ

console.log(str.match(/\.$/gi)) 
//백슬래쉬 기호를 이용해 이스케이프 문자로 설정. 마침표 찾기
// $ : 앞쪽 문장이 마침표를 이용해 끝났는지를 반환. 제일 끝부분 마침표가 있는가?
console.log(str.match(/\.$/gim))
//각 줄에서 마침표로 끝났는가? 마침표로 끝난 마침표들만 반환

 

📌 사용하는 메소드들은 뭐가 있을까?

 

정규식.test(문자열)      :일치 여부 반환
문자열.match(정규식)  : 일치하는 문자의 배열 반환
문자열.replace(정규식, 대체문자)   : 일치하는 문자를 대체

 

 

📌 패턴에 대해 알아보자! 

^ab : 줄 시작에 있는 ab와 일치하는 것

ab$ : 줄 끝에 있는 ab와 일치하는 것

 .     : 임의의 한 문자와 일치

console.log(str.match(/\.com$/gm))
//각 줄에서 .com으로 끝나는 것들만 찾기
console.log(str.match(/...\.com$/gm))
//.com앞에 세 문자까지 함께 출력 ex. 'ver.com'

a|b   : a 또는 b와 일치

ab?  : b가 없거나 b와 일치

console.log(str.match(/https?/g)) //s는 붙어있을수도 없을수도 있다는 뜻

---

{3} : 3개 연속 일치하는 것

{3,} : 3개 이상 연속 일치하는 것

{3,5} : 3개 이상 5개 이하 (3~5) 연속 일치하는 것

  +   : 1회 이상 연속 일치, '{1,}' 의 약어.

console.log(str.match(/\d{3}/g)) //숫자를 3개씩 끊어서 반환 (끊었는데 3개가 안되면 해당 x)
console.log(str.match(/\d{3,9}/g)) //3번 이상 9번 이하로 찾아줌.
console.log(str.match(/\d{3,}/g)) //3번 이상 찾아줌.

---

 [abc]   : a 또는 b 또는 c (a|b|c 와 동일하게 동작), 여러 개의 단어를 하나의 문자로 인식하지 않으니까 | 사용을 ㅊㅊ.

  [a-z]   : a 부터 z 사이의 문자 구간에 일치 (영어 소문자)

  [A-Z]   : A 부터 Z 사이의 문자 구간에 일치 (영어 대문자)

  [0-9]   : 0 부터 9 사이의 문자 구간에 일치 (숫자)

  [가-힣]   : 가 부터 힣 사이의 문자 구간에 일치 (한글)

console.log(str.match(/[a-z]{1,}/g)) //모든 영어 소문자를 찾아주되 단어별로.( {1,}의 영향. 이게 없으면 문자 하나씩 )
console.log(str.match(/[a-z]+/g))  //위 코드와 동일

console.log(str.match(/[a-zA-Z가-힣]+/g))  //모든 대소문자와 한글을 단어별로

---

 \w   : 63개 문자(word, 대소영문 52개, 숫자 10개, _ (언더바))에 일치

 \b   : 63개 문자에 일치하지 않는 문자 경계 

 \d   : 숫자(digit)에 일치

 \s   : 공백(space, tab 등)에 일치

const str = `010-1234-5678`
console.log(str.match(/\b[0-9]+\b/g)) //['010','1234','5678]
console.log(str.match(/\b\d+\b/g)) //위 코드와 동일

---

  (?:)   : 그룹지정

  (?=)   : 앞쪽 일치 (lookahead) 

 (?<-)  : 뒤쪽 일치 (lookbehind) 

도메인 주소만 출력하는 방법!!!
console.log(str.match(/https?:\/\/(?:\w+\.?)+\/?/g))
// /와 .은 이스케이프 문자로 표시해줘야해서 \와 함꼐. 
// (?:\w+\.?)+ : \w+\.? 라는 그룹이 한 개 이상(+기호) 나올 수 있다.
// \/? : 슬래시 기호가 있을수도 있고 없을 수도 있다.
// 예시 ['https://www.naver.com/', 'http://localhost

앞쪽 일치
console.log(str.match(/.+(?=과)/g)) //'과'라는 문자 앞에 임의의 한 문자와 일치시키고(.), 한 개 이상 연속되도록(+)
//예시 ['동해물']

뒤쪽 일치
console.log(str.match(/(?=과).+/g)) //예시 [' 백두산이 마르고 닳도록']

 

활용 예제)

1. 전화번호 찾기

console.log(str.match(/\d{3}-\d{4}-\d{4})) //['010-1234-5678']

2. 영어 소문자로만 이루어진 이메일 찾기

console.log(str.match(/\w+@\w+\.\w+/g)) //['010-1234-5678']

 

더 자세한 패턴을 알고싶다면?!
https://m.blog.naver.com/cjinnnn/221329842667