JS (31) - RegExp

31.1 정규 표현식

정규 표현식
일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)

• 패턴 매칭 기능 제공
  • 패턴 매칭 기능 : 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능

const tel = '010-1234-567팔'

const regExp = /^\d{3}-\d{4}\d{4}$/;
regExp.test(tel);		// false

---

31.2 정규 표현식의 생성

패턴과 플래그로 구성
/regexp(패턴)/i(플래그)

• 패턴 : 정규 표현식의 패턴

• 플래그 : 정규 표현식의 플래그 (g, i, m, u, y)

const target = 'Is this all there is?';

const regexp = /is/i;

regexp.test(target);	// true

• RegExp 생성자 함수를 이용해 변수를 사용해 동적으로 RegExp 객체 생성

const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;
                              
count('Is this all there is?', 'is');	// 3
count('Is this all there is?', 'xx');	// 0

---

31.3 RegExp 메서드

1) RegExp.prototype.exec

exec 메서드
인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환

• 매칭 결과가 없는 경우 null 반환

• 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환

const target = 'Is this all there is?';
const regExp = /is/;

regExp.exec(target);
// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

2) RegExp.prototype.test

test 메서드
인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환

const target = 'Is this all there is?';
const regExp = /is/;

regExp.test(target);	// true

3) RegExp.prototype.match

match 메서드
대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환

const target = 'Is this all there is?';
const regExp = /is/;

target.match(regExp);
// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

• g 플래그가 지정되면 모든 매칭 결과를 배열로 반환

const target = 'Is this all there is?';
const regExp = /is/g;

target.match(regExp);
// ['is', 'is']

---

31.4 플래그

• 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용

• 중요 플래그

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

• 플래그는 옵션이므로 선택적으로 사용

• 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있음

• 어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴 검색

• 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 대상만 검색하고 종료

---

31.5 패턴

• 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략

1) 문자열 검색

• 정규 표현식의 패턴에 문자 또는 문자열을 지정하면 검색 대상 문자열에서 패턴으로 지정한 문자 또는 문자열 검색

const target = 'Is this all there is?';
const regExp = /is/;

regExp.test(target);	// true
target.match(regExp);	// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

• 대소문자를 구별하지 않고 검색하려면 플래그 i 사용

const target = 'Is this all there is?';
const regExp = /is/i;

target.match(regExp);	// ['Is', index: 0, input: 'Is this all there is?', groups: undefined]

• 검색 대상 문자열 내에서 패턴과 매치하는 모든 문자열을 전역 검색하려면 플래그 g 사용

const target = 'Is this all there is?';
const regExp = /is/ig;

target.match(regExp);	// ['Is', 'is', 'is']

2) 임의의 문자열 검색

• . 은 임의의 문자 한 개를 의미 (문자 내용은 무엇이든 상관 X)

const target = 'Is this all there is?';
const regExp = /.../g;

target.match(regExp);	// ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']

3) 반복 검색

• {m,n} 은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열 의미

• 콤마 뒤에 공백이 있으면 정상 동작 X

const target = 'A AA B BB Aa Bb AAA';
const regExp = /A{1,2}/g;

target.match(regExp);	// ['A', 'AA', 'A', 'AA', 'A']

• {n}은 앞선 패턴이 n번 반복되는 문자열 의미
  • {n} == {n, n}

const target = 'A AA B BB Aa Bb AAA';
const regExp = /A{2}/g;

target.match(regExp);	// ['AA', 'AA']

• {n,}은 앞선 패턴이 최소 n번 이상 반복되는 문자열 의미

const target = 'A AA B BB Aa Bb AAA';
const regExp = /A{2,}/g;

target.match(regExp);	// ['AA', 'AAA']

• + 은 앞선 패턴이 한 번 반복되는 문자열 의미
  • + == 1

const target = 'A AA B BB Aa Bb AAA';
const regExp = /A+/g;

target.match(regExp);	// ['A', 'AA', 'A', 'AAA']

• ? 은 앞선 패턴이 최대 한 번(0번 포함) 이상 반복되는 문자열 의미
  • ? == {0, 1}

const target = 'color colour';
const regExp = /colou?r/g;

target.match(regExp);	// ['color', 'colour']

4) OR 검색

• |은 or의 의미

const target = 'A AA B BB Aa Bb AAA';
const regExp = /A|B/g;

target.match(regExp);	// ['A', 'A', 'A', 'B', 'B', 'B', 'A', 'B', 'A', 'A', 'A']

• 분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용

5) NOT 검색

• [...] 내의 ^은 not의 의미

• [^0-9]는 숫자를 제외한 문자를 의미

const target = 'AA BB 12 Aa Bb';
const regExp = /[^0-9]+/g;

target.match(regExp);	// ['AA BB ', ' Aa Bb']

6) 시작 위치로 검색

• [...] 밖의 ^은 문자열의 시작 의미

• [...] 내의 ^은 not의 의미

const target = 'https://poiemaweb.com';
const regExp = /^https/;

regExp.test(target);	// true

7) 마지막 위치로 검색

• $은 문자열의 마지막 의미

const target = 'https://poiemaweb.com';
const regExp = /com$/;

regExp.test(target);	// true

---

31.6 자주 사용하는 정규표현식

1) 특정 단어로 시작하는지 검사

• ^ 는 문자열의 시작을 의미

• ? 는 앞선 패턴이 최대 한 번(0번 포함)이상 반복되는지를 의미

const url = 'https://example.com'

/^https?:\/\//.test(url);			// true
/^(http|https):\/\//.test(url);		// true

2) 특정 단어로 끝나는지 검사

• $ 는 문자열의 마지막을 의미

const fileName = 'index.html'

/html$/.test(fileName);		// true

3) 숫자로만 이루어진 문자열인지 검사

• ^ 는 문자열의 시작을 의미
  $ 는 문자열의 마지막을 의미
  \d 는 숫자를 의미
  + 는 앞선 패턴이 최소 한 번 이상 반복되는 문자열 의미

const target = '12345'

/^\d+$/.test(target);		// true

4) 하나 이상의 공백으로 시작하는지 검사

• \s 는 여러 가지 공백문자를 의미

• \s는 [\t\r\n\v\f]와 같은 의미

const target = ' Hi!'

/^[\s]+/.test(target);		// true

5) 아이디로 사용 가능한지 검사

• 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리 인지 검사

const id = 'abc123'

/^[A-Za-z0-9]{4,10}$/.test(id);		// true

6) 메일 주소 형식에 맞는지 검사

const email = 'ungmo2@gmail.com'

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email);		// true

7) 핸드폰 번호 형식에 맞는지 검사

const tel = '010-1234-5678'

/^\d{3}-\d{3,4}\d{4}$/.test(tel);		// true

8) 특수 문자 포함 여부 검사

• 특수문자
  A-Za-z0-9 이외의 문자

const target = 'abc#123';
(/[^A-Za-z0-9]/gi).test(target);	// true

• 특수 문자 제거할 때는 String.prototype.replace 메서드 사용

target.replace(/[^A-Za-z0-9]/gi, '');	// abc123