[Poiemaweb] JavaScript 25 (정규표현식)

정규표현식 - 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용
주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제
/패턴/플래그
ex) 전화번호가 유효성 체크

const tel = '0101234567팔';
// 정규 표현식 리터럴
const myRegExp = /^[0-9]+$/;
console.log(myRegExp.test(tel)); // false

자바스크립트 메소드 - exec, test, match, replace, search, split

const targetStr = 'This is a pen.';
const regexr = /is/ig;

// RegExp 객체의 메소드
console.log(regexr.exec(targetStr)); // [ 'is', index: 2, input: 'This is a pen.' ]
console.log(regexr.test(targetStr)); // true

// String 객체의 메소드
console.log(targetStr.match(regexr)); // [ 'is', 'is' ]
console.log(targetStr.replace(regexr, 'IS')); // ThIS IS a pen.
// String.prototype.search는 검색된 문자열의 첫번째 인덱스를 반환한다.
console.log(targetStr.search(regexr)); // 2 ← index
console.log(targetStr.split(regexr));  // [ 'Th', ' ', ' a pen.' ]

플래그(옵션)
i - 대소문자를 구별 X
g - 문자열 내의 모든 패턴을 검색
m - 문자열의 행이 바뀌더라도 계속 검색

패턴 - 검색하고 싶은 문자열을 지정
문자열의 따옴표는 생략, 따옴표를 포함하면 따옴표까지도 검색
특별한 의미를 가지는 메타문자 또는 기호로 표현 가능

. - 임의의 문자 한 개
|, [] - or ex) /A|B/g, /A+|B+/g=/[AB]+/g
- - 범위 지정 ex) /[A-Z]+/g - 대문자 알파벳 추출, /[A-Za-z]+/g - 대소문자를 구별하지 않고 알파벳을 추출, /[0-9]+/g - 숫자 추출
\d - 숫자를 의미 <-> \D - 숫자 X
\w - 알파벳과 숫자를 의미 <-> \W - 알파벳과 숫자 X

const targetStr = 'AA BB Aa Bb 24,000';
// 알파벳과 숫자 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
let regexr = /[\w,]+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'Aa', 'Bb', '24,000' ]
// 알파벳과 숫자가 아닌 문자 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
regexr = /[\W,]+/g;
console.log(targetStr.match(regexr)); // [ ' ', ' ', ' ', ' ', ',' ]

^ - 문자열의 처음을 의미 ex) /^http/
$ - 문자열의 끝을 의미 ex) /html$/

[^] - 부정(not)을 의, [] 바깥의 ^는 문자열의 처음을 의미 ex) /^\d+$/

\s - 여러 가지 공백 문자 (스페이스, 탭 등) => [\t\r\n\v\f] ex) /^[\s]+/
{} - 자릿수 ex) {4,10}: 4 ~ 10자리, /^[A-Za-z0-9]{4,10}$/ - 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사

패턴을 최소 한번 반복하려면 앞선 패턴 뒤에 +
ex) /A+/g - A+는 A만으로 이루어진 문자열(‘A’, ‘AA’, ‘AAA’, …)를 의미

RegExp 객체 - new RegExp(패턴[, 플래그])

// 정규식 리터럴
/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');
new RegExp(/ab+c/i); // ES6

RegExp 메소드
1. RegExp.exec(string) - 문자열을 검색하여 매칭 결과를 반환
반환값은 배열 또는 null
g 플래그를 지정하여도 첫번째 매칭 결과만을 반환

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

const res = regExp.exec(target);
console.log(res); // [ 'is', index: 5, input: 'Is this all there is?' ]

2. RegExp.test(string) - 문자열을 검색하여 매칭 결과를 반환
   반환값은 true 또는 false