[JS deepdive] RegExp

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다 ( 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능)

 

정규 표현식의 생성

정규 표현식 리터럴과 RegExp 생성자 함수를 통해 생성할 수 있다.

//정규 표현식 리터럴
const target = "iIs this all there is?";
// 패턴 : is
// 플래그 : i => 대소문자를 구별하지 않고 검색한다
const regexp = /is/i;

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

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

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

RegExp 매서드

정규표현식을 사용하는 메서는 여러가지 있지만 , 우선적으로 3가지만 살펴보려고 한다.

 

1.RegExp.prototype.exec

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

 

exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래스를 지정해도 첫 번째매칭 결과만 반환한다.

 

2.RegExp.prototype.test

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

 

3. String.prototype.match

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

 

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

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

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

console.log(target.match(regExp)); //[ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]
// exec 메서드는 문자열 내의 모든 패턴을 ㅇ검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다.
// 하지만 String.prototype.match 메서드는 g플래그가 지정되면 모든 매칭 결과를 배열로 바노한함
console.log(target.match(regExp2)); //[ 'is', 'is' ]

 

플래그

총 6가지 플래그가 있다 . i ,g , m  , s ,u ,y  그 중 중요한 i , g , m 만 다루어 보자

 

 i  :    [ 의미 : Ignore case,                   내용 :  대소문자를 구변하지 않고 패턴을 검색함]

g  :    [의미 :  Global ,                          내용 : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색함]

m :    [의미 : Multi line,                        내용 : 문자열의 행이 바뀌더라도 패턴 검색을 계속함]

 

플래그는 옵션이므로 선택적으로 사용할 수 있으며, 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다. 어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴을 검색한다. 그리고 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째로 매칭한 대상만 검색하고 종료한다.

 

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

// target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색함
console.log(target.match(/is/)); //[ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]

//target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색함
console.log(target.match(/is/i)); //[ 'Is', index: 0, input: 'Is this all there is?', groups: undefined ]

// target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색함
console.log(target.match(/is/g)); //[ 'is', 'is' ]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색함
console.log(target.match(/is/gi)); //[ 'Is', 'is', 'is' ]

 

패턴

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

정규 표현식은 패턴과 플래그로 구성된다. 정규 표현식의 패턴은 문자열의 일정한 규칙을 표현하기 위해 사용하며, 정규 표현식의 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다

 

패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지 패턴에 포함되어 검색된다. 또한 패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현할 수 있다. 어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때 '정규 표현식과 매치한다;'라고 표현한다.

 

패턴을 표현하는 방법

 

#1. 문자열 검색

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

 

#2. 임의의 문자열 검색

.은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관없다. 아래 예제는 .을 3개 연속으로 사용하여 패턴을 생성했으므로 문자의 내용과 상관없이 3자리 문자열과 매칭된다

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

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

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

#3. 반복 검색

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

{n}은 앞선 패턴이 n번이 반복되는 문자여열, {n,}은 최소 n번이 반복되는 문자열을 의미한다

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다  {1,}와 같음

?은 앞선 패턴이 최대 한 번 이상 반복도는 문자열을 의미한다 {0,1}와 같음

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' ]

const regExp2 = /A{2}/g;
console.log(target.match(regExp2)); //[ 'AA', 'AA' ]

const regExp3 = /A{2,}/g;

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

const regExp4 = /A+/g;
console.log(target.match(regExp4)); //[ 'A', 'AA', 'A', 'AAA' ]

const target2 = "color colour";
const regExp5 = /colou?r/g;

console.log(target2.match(regExp5)); //[ 'color', 'colour' ]

#4. OR 검색

| 은 or의 의미를 갖는다. 

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

[]내의 문자는 or로 작동하고 그 뒤에 +를 사용하면 앞선 패턴을 한번 이상 반복한다

 

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

// 'A' 또는 'B'를 전역 검색한다
const regExp = /A|B/g;
console.log(target.match(regExp));
// [
//     'A', 'A', 'A',
//     'B', 'B', 'B',
//     'A', 'B'
//   ]

//분해되지 않은 단어 검색
const regExp2 = /A+|B+/g;
console.log(target.match(regExp2)); //[ 'A', 'AA', 'B', 'BB', 'A', 'B' ]

//[]사용
const regExp3 = /[AB]+/g;
console.log(target.match(regExp3)); //[ 'A', 'AA', 'B', 'BB', 'A', 'B' ]

 

범위 지정시 -를 사용함

숫자 검색하는 방법은 0-9도 되지만 \d 도 됨 문자의 경우는 \D .

쉼표를 패턴에 포함시킬려면 [,]을 적으면 됨

//범위 지정
const target = "A AA BB ZZ Aa Bb 12,345";
//'A' ~'Z'가 한 번 이상 반복되는 문자열을 전역 검색함
const regExp = /[A-Z]+/g;
console.log(target.match(regExp)); //[ 'A', 'AA', 'BB', 'ZZ', 'A', 'B' ]

// 대소문자 구문 안 할 경우
const regExp2 = /[A-Za-z]+/g;
console.log(target.match(regExp2)); //[ 'A', 'AA', 'BB', 'ZZ', 'Aa', 'Bb' ]

//숫자를 검색
const regExp3 = /[0-9]+/g;

console.log(target.match(regExp3)); //[ '12', '345' ]

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

//\d 사용
const regExp5 = /[\d,]+/g;
console.log(target.match(regExp5)); //[ '12,345' ]

const regExp6 = /[\D,]+/g;
console.log(target.match(regExp6)); //[ 'A AA BB ZZ Aa Bb ', ',' ]

 

\w 는 알파벳, 숫자 언더 스코어를 의미함 \W는 \w의 반대로 숫자 알바켓 언더 스코어가 아닌 문자 의미함

const target = "A AA BB ZZ Aa Bb 12,345";

const regExp = /[\w,]+/g;
const regExp2 = /[\W,]+/g;

console.log(target.match(regExp)); //[ 'A', 'AA', 'BB', 'ZZ', 'Aa', 'Bb', '12,345' ]

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

#5. NOT 검색

[...] 내의 ^은 not의 의미를 갖는다. [^0-9]는 숫자를 제외한 문자를 의미함

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

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

#6. 시작 위치로 검색

[...] 밖의 ^은 문자열의 시작을 의미한다. 단, [...] 내의 ^은 not

 

#7. 마지막 위치로 검색

$은 문자열의 마지막을 의미한다. ~로 끝나는지

 

const target = "https;//poiemaweb.com";

const regExp = /^https/;

const regExp2 = /com$/;

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

 

자주 사용하는 정규표현식

#1, 2 특정 단어로 시작하는 지,  특정 단어로 끝나는지 검사

 

 

const url = "https://example.com";

// 'http:// 또는 'https://'로 시작하는지

console.log(/^https?:\/\//.test(url)); //true

// 'com'으로 끝나는지

console.log(/com$/.test(url)); //true

 

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

처음과 끝이 숫자이고 숫자가  한 번이상 숫자가 반복

const target = "1234";

console.log(/^\d|$/.test(target)); //true

 

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

\s는 여러 가지 공백 문자를 의미함  \s 는 [\t\r\n\v\f] 와 같음

const target = " Hi!";

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

 

#5. 아이디로 사용 가능한지

 

#6. 이메일 주소 형식에 맞는 지

#7 핸드폰 번호 형식에 맞는지

#8 특수 문자 포함하고 있는지

[^A-Za-z0-9] 는 특수문자이다.