정규표현식(RegExp)

정규표현식 선언 방법

수정 내역

• 22.04.07
  자주 쓰는 메서드 표 추가,
  패턴 | 수정,
  공백 제거 활용 패턴 추가,
  또는 패턴 추가

1. 생성자 방식 - new RegExp('표현', '옵션')

new RegExp('표현', '옵션')
new RegExp('^abc', 'gi')

2. 리터럴 방식

// (리터럴 방식) - /표현/옵션
/^abc/gi

---

자주 쓰는 메서드

메서드	문법	설명
test	정규식.test(문자열)	일치 여부(Boolean) 반환
match	문자열.match(정규식)	일치하는 문자열의 배열(Array) 반환
replace	문자열.replace(정규식, 대체문자)	일치하는 문자열을 대체하고, 대체된 문자열(String) 반환

정규식의 메서드

// 정규식.test(문자열) : 일치 여부(Boolean) 반환

var str = 'abcdefg';
/^abc/.test(str); // true

문자열의 메서드

• match()

  문자열.match(정규식) - 일치하는 문자열의 배열(Array) 반환

  • 옵션을 넣지 않을 경우 다양한 정보 함께 출력, 그 중 첫번째 인덱스에 검색한 첫번째 값이 들어옴
  • 옵션을 넣으면 검색한 단어로 구성된 배열만 출력

var str = 'abcd';
str.match(/^abc/g); // ['abc']

• replace()

  문자열.replace(정규식, 대체문자)

---

옵션

옵션	내용
g	일치하는 모든 내용을 검색 (global)
i	대문자, 소문자 구분 없이 검색 (ignore case)
m	문자열의 ` 또는 ' 기호 바로 앞 부분을 $ 패턴의 줄 라인 끝이라고 보는데, m 옵션 사용시 개행되어 있는 각 줄 라인 끝으로 검색 (multi line)

// 옵션 g : 정규식에 일치하는 모든 문자 검색
var str = 'abc def text Abc bold abc.';
str.match(/abc/g); // ['abc', 'abc']


// 옵션 i : 대소문자 구분 없이 검색
var str = 'abc def text Abc bold Bbc.';
str.match(/abc/gi); // ['abc', 'Abc', 'abc']


// 패턴 $ : 문자열 라인 끝을 검색
// 옵션 m : 개행된 줄을 각각의 문자열로 인식하여 패턴 $ 또는 ^를 사용해 각 줄에서 검색할 수 있도록 하는데 쓰임
var str = `
apple
`
str.match(/apple$/g); // null


var str = `
apple`
str.match(/apple$/g); // ['apple']


var str = `
123567890
abcdef lorem ipsum text desc
orange cherry apple banana
apple
`
str.match(/apple$/gm); // ['apple']

---

패턴

패턴	설명
\	(백슬래시) 문자 앞에 쓰이며, 다음에 오는 기호를 강제로 문자로 해석시킴
.	임의의 한 문자와 일치 (아무글자나)
^ab	줄(Line) 시작에 있는 ab와 일치
ab$	줄(Line) 끝에 있는 ab와 일치
$	` 또는 ' 기호 바로 앞을 탐색. 즉, 문자열 끝을 탐색함. (개행된 각 줄에서 찾으려면 옵션 m 사용)
a|b	a 또는 b와 일치
ab?	b가 없거나 b와 일치
{3}	3개 연속 일치 (숫자에 따라 연속된 문자 찾기)
{3,}	3개 이상 연속 일치 (숫자 이상으로 구성된 문자 찾기)
{3,5}	3개 이상 5개 이하 연속 일치 (숫자 이상, 이하로 구성된 문자 찾기
\w	63개 문자(Word) - 영문자 52개 + 숫자 10개 + _ 에 일치
\b	63개 문자에 일치하지 않는 문자 경계(boundary)
\d	숫자(Digit)에 일치 (숫자 덩어리만 추출)
\s	공백(Space, Tab 등)에 일치
(?=)	앞쪽 일치(Lookahead)
(?<=)	뒤쪽 일치(Lookbehind)
[abc]	a 또는 b 또는 c
[a-z]	a부터 z 사이의 문자 구간에 일치(영어 소문자)
[A-Z]	A부터 Z 사이의 문자 구간에 일치(영어 대문자)
[0-9]	0부터 9 사이의 문자 구간에 일치(숫자)
[가-힣]	가부터 힣 사이의 문자 구간에 일치(한글)

// 패턴 . : 임의의 한 문자와 일치 (아무 글자나 상관 없이 검색)
// 앞에 2글자는 아무 글자나 상관 없고 마지막 글자만 d인 3글자 검색
var str = 'abcd and apple banana over ipad fox frozen';
str.match(/..d/g); // ['bcd', 'and', 'pad']


// 패턴 ^ : 패턴 $의 반대, 문자열 라인 앞에서 검색
var str = `
123567890
abcdef lorem ipsum text desc
orange cherry apple banana
apple
`
str.match(/^apple/g); // null

var str = `
123567890
abcdef lorem ipsum text desc
orange cherry apple banana
apple
`
str.match(/^apple/gm); // ['apple']


// 패턴 | : 또는
var str = 'abc def text bold abc.';
str.match(/abc|text/g); // ['abc', 'text', 'abc']
str.match(/text|abc/); // ['abc', index: 0, input: 'abc def text bold abc.', groups: undefined]


// 패턴 ? : 있거나 없거나
var str = 'http def text bold https abc.';
// s 가 있거나 없거나
str.match(/https?/g); // ['http', 'https']


// 패턴 {} : {숫자} 숫자 연속 일치하는 부분 검색
var str = 'abbcccdddd';
str.match(/d{2}/g); // ['dd', 'dd'] 2개 연속 일치하는 부분 반환

var str = 'abbcccdddd';
str.match(/d{3}/g); // ['ddd'] 3개 연속 일치하는 부분 반환

var str = 'abbcccdddd';
str.match(/d{1,}/g); // ['dddd'] 1개 이상 (최대로)연속 일치하는 부분 반환

var str = 'abbcccdddd';
str.match(/d{1,3}/g); // ['ddd', 'd'] 1이상 3이하 (최대로)연속 일치 되는 부분을 먼저 찾고 나머지 d를 검색조건 1이상 3이하를 매칭해서 'd'도 반환


// 패턴 \w : (간단히 말해 영대소문자 + 숫자 + _) 63개 문자(Word) - 영문자 52개 + 숫자 10개 + _ 에 일치
var str = 'abbcccdddd descfox com?=frozen text';
str.match(/f\w{1,}/g); // ['fox', 'frozen'] f로 시작하는 단어 추출, 하지만 이 예제에서는 앞에 다른 영문자가 붙어있는 단어(descfox)에서 추출되는 문제가 있음

// 패턴 \b :  63개 문자에 일치하지 않는 문자 경계(boundary)
// 바운더리 패턴은 내가 찾는 문자 앞이나 뒤에 연결된 문자가 없이 깨끗하게 단어 추출하고 싶을 때 많이 사용
var str = 'abbcccdddd descfox com?=frozen text';
str.match(/\bf\w{1,}\b/g); // ['frozen']


// 패턴 \d : 숫자(Digit)에 일치
var str = 'abc 010-1234-5678 frozen 123 098 text';
str.match(/\d/g); // ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', '8', '1', '2', '3', '0', '9', '8']

var str = 'abc 010-1234-5678 frozen 123 098 text';
// 덩어리만 추출하고 싶을 때는 {} 패턴과 조합
str.match(/\d{1,}/g); // ['010', '1234', '5678', '123', '098']


// 패턴 \s : 공백(Space, Tab 등)에 일치
var str = 'abc frozen 123 func 098 text';
str.match(/..c\s/g); // ['abc ', 'unc ']


// 공백 모두 제거에 활용
var str = '   abc   def    g hi jk l       '
str.replace(/\s/g, ''); // abcdefghijkl

// 공백 제거 활용
let str = '    abc  def    text    bold    abc.          ';
const h1El = document.querySelector('h1')
str = str.trim().replace(/\s{2,}/gm, ' ') // abc def text bold abc.


// 패턴 (?=) : 앞쪽 일치(Lookahead)
var str = 'abc.defgh@gmail.com'; // @ 를 기준으로 하면 (?=@)
str.match(/.{1,}(?=@)/g); // ['abc.defgh']

// 패턴 (?<=) : 뒤쪽 일치(Lookbehind)
var str = 'abc.defgh@gmail.com'; // @ 를 기준으로 하면 (?<=@)
str.match(/(?<=@).{1,}/g); // ['gmail.com']

머리 터질거 같다...

---

정규식 관련 사이트

• https://regexr.com/
• https://regex101.com/
• https://regexper.com/
• https://heropy.blog/2018/10/28/regexp/

---

결론

자주 쓰는거라도 이해하고 외워보자.