31 RegExp

31.1 정규표현식이란

일정한 패턴을 가진 문자열의 집합을표현하기 위해 사용하는 형식 언어이다.

문자열을 대상으로 패턴 매칭 기능을 제공한다.

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

31.2 정규 표현식의 생성

/regexp/i

시작 ,종료 기호 /

regexp 패턴

i 플래그

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

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

const regexp = /is/i;

console.log(regexp.test(target)); //true

const target = "is this all there is ?";
const regexp = new RegExp(/is/i);

const isTest = regexp.test(target); //true

31.3 RegExp 메서드

31.3.1 RegExp.prototype.exec

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

const target = "Is there all there is";
const regExp = /is/;

console.log(regExp.exec(target)); //[ 'is', index: 19, input: 'Is there all there is', groups: undefined ]

31.3.2 RegExp.prototype.test

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

const target = "Is there all there is";
const regExp = /is/;

console.log(regExp.test(target)); //true

31.3.3 RegExp.prototype.match

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

exec 와 차이점은 g 플래그를 지정하면 모든 매칭 결과를 배열로 반환

const target = "is there all there is";
const regExp = /is/g;

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

31.4 플래그

플래그는 옵션이므로 선택적 사용 또한 하나이상의 플래그를 동시에 사용할수 있다.

플래그 의미 설명

i	ignore case	대소문자를 구별하지 않고 패턴 검색
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
m	multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속

const target = "Is there all there is";
const regExp = /is/gi;

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

31.5 패턴

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

정규 표현식의 패턴은 문자열의 일정한 규칙을 표현하기 위해 사용되고

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

31.5.1 문자열 검색

const target = "Is there all there is";
const regExp = /is/;

console.log(target.match(regExp));
//[ 'is', index: 19, input: 'Is there all there is', groups: undefined ]

31.5.2 임의의 문자열 검색

. 은 임의의 문자 개를 의미한다.

…은 3개의 점이므로 문자 3개를 의미한다.

문자의 내용과 상관없이 3자리 문자열 매치

const target = "Is this all there is?";
const regExp = /.../gi;

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

31.5.3 반복 검색

{m,n} 최소 m번 최대 n번 반복되는 문자열을 의미한다.

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

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

{n}은 n번 반복되는 문자열 의미

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

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

{n,}은 최소 n번 이상

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

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

+는 앞선 패턴이 최소 한번이상 반복되는 문자열을 의미

+는 {1,}과 같다 .

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

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

?는 앞선 패턴이 최대 한번 이상 반복되는 문장열을 의미한다. 0번 포함

?는 {0,1} 과 같다

const target = "color colour";

const regExp = /colou?r/g;

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

이 코드에서 colo 다음 ‘u’가 최대 한번 이상(0번포함) 반복되고 r이 이어지는 문자열

31.5.4 OR 검색

| 은 OR의 의미를 갖는다 /A|B/는 A 또는 B 이다

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

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

분해되지 않는 레벨로 검색할려면 + 를 사용하자

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

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

[ ] 내의 문자는 OR로 동작한다. 그뒤에 + 사용하면 한번이상 반복

const target = "A AA B BB Aa Bb AAA";
const regExp = /[AB]+/g;

console.log(target.match(regExp));
/*'A',   'AA',
'B',   'BB',
'A',   'B',
'AAA'
*/

범위를 지정하려면 [ ] 내에 - 를 사용한다.

const target = "A AA B BB ZZ Bb AAA";
const regExp = /[A-Z]+/g;

console.log(target.match(regExp));
 /*
 [
  'A',   'AA',
  'B',   'BB',
  'ZZ',  'B',
  'AAA'
]
 */

대소문자를 구별하지 않고 검색하는 방법은 다음과 같다.

const target = "A AA B BB ZZ Bb AAA 12 aa zz";
const regExp = /[A-Za-z]+/g;

console.log(target.match(regExp));
/*
[
  'A',   'AA', 'B',
  'BB',  'ZZ', 'Bb',
  'AAA', 'aa', 'zz'
]
 */

const target = "AA BB 12,345";
//0 ~9 또는 , 가 한번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[0-9,]+/g;
console.log(target.match(regExp)); //[ '12,345' ]

\d 는 숫자를 의미한다 \D는 문자를 의미한다.

const target = "AA BB 12,345";
//0 ~9 또는 , 가 한번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\\d,]+/g;
console.log(target.match(regExp)); //[ '12,345' ]

const target = "AA BB 12,345";
//0 ~9 또는 , 가 한번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\\D,]+/g;
console.log(target.match(regExp)); //[ 'AA BB ', ',' ]

\w 는 알파벳,숫자,언더스코어를 의미한다.

const target = "Aa Bb 12,345 _$%^";
let regExp = /[\\w,]+/g;

console.log(target.match(regExp)); //[ 'Aa', 'Bb', '12,345', '_' ]

\W 는 알파벳 ,숫자 ,언더스코어가 아닌 문자를 의미한다.

const target = "Aa Bb 12,345 _$%^";
let regExp = /[\\W,]+/g;

console.log(target.match(regExp)); //[ ' ', ' ', ',', ' ', '$%^' ]

31.5.5 NOT 검색

^ 은 not의 의미를 갖는다 . [^0-9]는 숫자를 제외한 문자 \D와 같다.

const target = "Aa Bb 12 Aa Bb";
let regExp = /[^0-9]+/g;

console.log(target.match(regExp)); // [ 'Aa Bb ', ' Aa Bb' ]

31.5.6 시작위치로 검색

[ …] 밖의 ^은 문자열의 시작을 의미한다 . /^http/

[ …] 안의 ^은 not의 의미를 가진다. [^0-9]

const target = "<https://poiemaweb.com>";
const regExp = /^https/;

console.log(regExp.test(target)); //true

31.5.7 마지막 위치로 검색

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

const target = "<https://poiemaweb.com>";
const regExp = /com$/;
console.log(regExp.test(target)); //true

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

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

[ … ] 바깥 ^은 문자열 시작 의미

?는 앞선 패턴이 최대 한번 이상 반복되는지를 의미

const target = "<https://poiemaweb.com>";
const regExp = /^https?:\\/\\//;
console.log(regExp.test(target)); //true

const target = "<https://poiemaweb.com>";
const regExp = /^(http|https):\\/\\//;
console.log(regExp.test(target)); //true

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

cont fileName = 'index.html'
const regExp = /html$/
regExp.test(fileName) //true 

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

const target =12345 
const regExp = /^\\d+&/ 
regExp.tesst(target) //treu 

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

const target = " hi!";
const regExp = /[\\s]+/;
console.log(regExp.test(target)); //true

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

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

const target = "abc123";
const regExp = /^[A-Za-z0-9]{4,10}$/;
console.log(regExp.test(target)); //true

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

const regExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;

• 이메일 주소는 @ 기호로 구분되어야 합니다.
• @ 기호 앞에는 최소 1개 이상의 알파벳 대/소문자, 숫자, 특수문자인 ., _, %, +, `` 가 올 수 있습니다.
• @ 기호 뒤에는 최소 1개 이상의 알파벳 대/소문자, 숫자가 올 수 있습니다.
• . 기호 뒤에는 최소 2개 이상의 알파벳 대/소문자가 올 수 있습니다.

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

const target = "010-9192-7024";
const regExp = /^\\d{3}-\\d{3,4}-\\d{4}$/;

• 휴대폰 번호는 `` - 기호로 구분되어야 합니다.
• 맨 앞의 3자리는 010, 011, 016, 017, 018, 019 중 하나로 시작해야 합니다.
• 두 번째 그룹은 3~4자리의 숫자로 이루어져야 합니다.
• 세 번째 그룹은 4자리의 숫자로 이루어져야 합니다.

31.6.8 특수 문자 포함 여부 검사

[ …] 내부에 ^는 not 이다 특수문자는 A-Za-z0-9 이외의 문자이다 .

const target = "abc#123";
const regExp = /[^A-Za-z0-9]/gi;
console.log(target.match(regExp)); //#

String.prototype.replace를 사용하면 제거할수있다.

let target = "abc#123";
const regExp = /[^A-Za-z0-9]/gi;
console.log(target.match(regExp)); //#

target = target.replace(regExp, "");
console.log(target); //abc123