📖 RegExp

정규 표현식이란 ❓

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다
정규 표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 떄문에 가독성이 좋지 않다..`

정규 표현식의 생성 ❓

정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다.

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

// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고  검색한다
const regexp = /is/i;

// test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 매칭 결과를
// 불리언 값으로 반환한다.
regexp.text(target); // true

RegExp 생성자 함수를 사용하여 RegExp 객체를 생성할 수도 있다.

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

const regexp = new RegExp(/is/i); // ES6
// const regexp = new RegExp(/is/, 'i');
// const regexp = new RegExp('is', 'i);

regexp.text(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

RegExp 메서드 ❓

RegExp.prototype.exec ❔

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

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

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

exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번쨰 매칭 결과만 반환하므로 주의

RegExp.prototype.test ❔

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

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

regExp,text(target); // true

RegExp.prototype.match ❔

String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환.

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

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

match. 메서드는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환

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

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

플래그 ❓

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다 플래그는 6개지만 중유한 3개의 플래그를 알아보자

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

• 플래그는 선택적으로 사용가능
• 순서와 상관없이 하나 이상의 플래그를 동시에 설정 가능
• 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴 검색
• 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색하고 종료

패턴 ❓

정규 표현식은 일정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 패턴과 플래그로 구성

• 패턴 : 문자열의 일정한 규칙을 표현하기 위해 사용
• 플래그 : 정규 표현식의 검색 방식을 설정하기 위해 사용

문자열 검색 ❔

정규 표현식의 패턴에 문자 또는 문자열을 지정하면 검색 대상 문자열에서 패턴으로 지정한 문자 또는 문자열을 검색한다. RegExp 메서드를 사용하여 검색 대상 문자열과 정규 표현식의 매칭 결과를 구하면 검색이 수행된다.

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

// 'is' 문자열과 매치하는 패턴, 플래그가 생략되었으므로 대소문자를 구별한다.
const regExp = /is/;

// target과 정규 표현식이 매치하는지 테스트한다.
regExp.test(target); // true

// target과 정규 표현식의 매칭 결과를 구한다.
target.matach(regExp);
// ["is", index: 5, input: "Is this all there is", groups: undefined] 

대소문자를 구별하지 않고 검색하려면 플래그 i를 사용
검색 대상 문자열 내에서 패턴과 매치하는 모든 문자열을 전역 검색하려면 플래그 g를

임의의 문자열 검색 ❔

.은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관없다.

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

// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;

target.match(rgeExp); // ["Is", "thi", "s a", "li", "the", "re", "is?"]

반복 검색 ❔

{m,n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. 콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의

const target = 'A AA BB Aa Bb AAA';

// 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{1,2}/g;

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

• {n}은 앞선 패턴이 n번 반복되는 문자열을 의미한다. 즉, {n}은 {n,n}와 같다.
• {n,}은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미
• +는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미 +는 {1,}와 같다
• ?는 앞선 패턴이 최디 한 번 이상 반복되는 문자열을 의미한다. 즉 ?는 {0,1}과 같다.

OR 검색 ❔

|은 or의 의미를 갖는다. 다음 예제의 /A|B/는 'A' 또는 'B'를 의미한다.

const target = 'A AA B BB Aa Bb';

// 'A' 또는 'B'를 전역 검색한다
const regExp = /A|B/g;

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

• 분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용
• 범위를 지정하려면 [] 내에 -를 사용한다

대소문자를 구별하지 않고 알파벳을 검색하는 방법

const target = 'AA BB Aa Bb 12';

// 'A' ~ 'Z' 또는 'a' ~ 'z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[A-Za=z]+/g;

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

숫자를 검색하는 방법

const target = 'AA BB 12,345';

// 'a' ~ '9'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[0-9]+/g;

target.match(regExp); // ["12", "345"]

NOT 검색 ❔

[...] 내의 ^은 not의 의미를 갖는다.

const target = 'AA BB 12 Aa Bb';

// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;

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

시작 위치로 검색 ❔

[...] 밖의 ^은 문자열의 시작을 의미한다. 단, [...] 내의 ^은 not의 의미를 가지므로 주의하기 바란다.

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

// 'https'로 시작하는지 검사한다.
const regExp = /^https/;

regExp.text(target); // true

마지막 위치로 검색 ❔

$은 문자열의 마지막을 의미한다

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

// 'com'로 시작하는지 검사한다.
const regExp = /com$/;

regExp.text(target); // true

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

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

[...] 바깥의 ^은 문자열의 시작을 의미하고, ?은 앞선 패턴이 최대 한번이상 반복되는지 의미한다. 다시 말해, 검색 대상 문자열에 앞선 패턴('s')이 있어도 없어도 매치된다.

특정 단어로 끝나는지 검사 ❔

검색 대상 문자열이 'html'로 끝나는지 검사한다. $ㅡㄴ 문자열의 마지막을 의미

const fileName = 'index.html';

// 'html'로 끝나는지 검사한다.
/html$/.test(fileName); // true

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

[...] 바깥의 ^은 문자열의 시작을. $는 문자열의 마지막을 의미한다. \d는 숫자를 의미하고 +는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미. 즉 처음과 끝이 숫자이고 최소 한 번 이상 반복되는 문자열과 매치

const fileName = '12345';

// 숫자로만 이루어진 문자열인지 검사한다.
/^\d+$/.test(target); // true

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

const target = 'Hi!';
// 하나 이상의 공백으로 시작하는지 검사
/^[\s]+/.test(target); // true

아이디로 사용 가능한지 검사 ❔

const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.text(id); // true

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

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}$/.text(email); // true

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

const cellphone = '010-1234-5678';

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

특수 문자 포함 여부 검사 ❔

const target = 'abc#123';

(/[^A-Za-z0-9]).text(target); // true
 

특수문제를 제거할 떄는 String.prototype.replace 메서드를 사용