정규표현식 플래그

정규표현식에서 플래그로 사용할 수 있는 문자는 i,g,m이다.

플래그	명칭	설명
i	ignoreCase	대소문자를 구분하지 않음. 매치된 첫 문자열을 반환
g	global	패턴에 매치되는 모든 문자열을 배열로 반환
m	multiline	매치 대상에 줄바꿈이 있더라도 전체를 검색

플래그에 g 하나만 지정할 수 있고 igm과 같이 전체를 지정할 수도 있으며 mgi와 같이 순서를 바꿔서 지정할 수도 있다, 작성한 순서에 관계없이 지정한 플래그 기능 모두를 적용한다.

'sports'.match(/sp/g);

위와 같이 메소드의 파라미터에 플래그를 지정할 때는 패턴의 두번째 슬래시 다음에 작성한다.

new RegExp('sp','g');

위와같이 생성자 함수에 플래그를 지정할 때는 두 번째 파라미터에 문자열을 지정한다.

멀티라인 m

문자열에 \n 줄바꿈이 있을때 사용한다. 플래그 m을 지정하면 줄 전체에 패턴을 매치한다. 이는 줄 바꿈 문자(\n)을 줄 분리자로 인식하지 않고 단순 문자로 인식하기 때문에 여러 줄에 매치하게 된다.

'Javascript\nMultiLine\nMultiLine'.match(/Multi/igm);

//[Multi, Multi]

정규 표현식 메소드

메소드	개요
match	매치된 문자열을 배열로 반환, 매치가 안되면 null 반환
replace	매치된 문자열을 지정한 문자열로 치환
search	매치된 문자열의 인덱스 반환, 매치가 안 되면 -1을 반환
test	매치되면 true, 안되면 false 반환
split	매치된 문자로 문자열을 분할하여 반환
exec	매치된 문자열 하나를 배열로 반환, 매치가 안 되면 null 반환

match

'StringClass'.match('s');
//[s]

match 메소드의 파라미터에 RegExp 인스턴스를 지정하지 않으면 RegExp 생성자 함수를 호출하여 인스턴스를 생성한다.

new RegExp('s', 'g');

이때 문자열로 패턴을 지정하면 패턴 형태로 변환한다. 그래서 문자열로 패턴을 지정할 수 있다.

test

test메소드는 패턴을 매치 대상에 매치하여 매치 여부를 반환한다. test 메소드는 String 클래스의 메소드와 달라 파라미터에 매치 대상을 지정하고 메소드 앞에 패턴을 지정 한다. 매치되면 true를 반환하고 매치되지 않으면 false를 반환한다.

let result = /12/.test("12_34_12");
//true

정규표현식 패턴문자

패턴은 크게 두가지 형태로 지정할 수 있다. 매치 대상을 문자열 값으로 매치하는 형태와 패턴문자를 지정하여 패턴으로 매치하는 형태이다. 패턴 문자는 ^, $, \, . *, +, ?, (), [], {}, | 이다.

패턴문자는 매치 대상의 첫 문자부터 매치하거나 중복된 문자와 매치하는 등 문자마자 특수한 기능을 가지고 있다.

63개 문자에서 매치 \B

\B는 63개 문자에 매치 한다.

63개 문자
영문 대문자(26)
영문 소문자(26)
숫자(10)
언더바(_)

63개 문자 다음(뒤)에 문자가 있어야 검색 가능

"A12 B12 12".match(/12\B/g);
//null

위의 코드에서 매치가 안된 것은 12에 이어 63개 문자를 가진 문자열이 하나도 없기 때문이다. A12 B12 다음의 공백은 63개 문자가 아니므로 매치되지 않는다. 마지막 12 다음에는 문자가 없다.

"A12A 12B 12A".match(/12\B/g);
//[12,12,12]

A12A 12B 12A에서 12를 검색하여 [12,12,12]를 반환한다.

63개 문자 전(앞)에 문자가 있어야 검색 가능

"A12 12 C12".match(/\B12/g);
//[12,12]

매치대상에서 12앞에 63개 문자가 있는 것은 A12와 C12이므로 [12,12]가 반환 되었다.

"A12B C12D E12F".match(/\B12\B/);
//[12,12,12]

12의 앞과 뒤에 63개 문자가 있는 경우를 리턴 하여 [12,12,12]가 리턴 되었다.

63개 문자 이외에 매치 \b

\b는 63개 이외 문자에 매치한다. 여기서 63개 이외 문자는 영문 대문자(26), 소문자(26), 숫자(10), 언더바(_)를 합한 63개 문자를 제외한 모든 문자를 의미한다. 한글, &, #과 같은 문자가 이에 속한다.

"A12 12B 12C".match(/12\b/g);
//[12]

매치대상 처음의 A12 뒤에 63개 이외 문자인 공백이 있으므로 [12]가 매치 되어 리턴 되었다.

하나 이상 매치 +

'aaaaac'.match(/a/);
//[a]

'aaaaac'.match(/a+/);
//[aaaaa]

플래그 g를 지정하면 a 전체가 매치 되므로 더하기(+) 패턴 문자의 하나 이상에 매치 기능과 유사하지만 반환하는 형태가 다르다.

플래그 g는 매치된 값이 배열 엘리먼트에 설정 되므로 매치된 수많큼 배열 엘리먼트가 생긴다.
하지만 더하기(+)는 배열엘리먼트가 하나만 생긴다.

'하나이상에 매치'는 반드시 하나가 매치되고 연속해서 매치 될 수 있는 문자가 있으면 이를 전부 매치한다는 것을 의미한다. 반드시 하나는 매치돼야 하는 것이 조건이다. 더하기 패턴문자는 매치된 문자를 전부 하나의 배열 엘리먼트로 반환한다.

'aab aac'.match(/a/g);
//[a,a,a,a]
'aab aac'.match(/a+/g);
//[aa,aa]

문자집합 [ ]

패턴	개요
[ ]	문자 집합, 지정한 문자 단위로 매치
[패턴문자]	패턴 문자를 일반 문자로 매치
[\b]	백스페이스
[-]	구간에 속한 값을 매치
[^]	지정한 문자가 아닌 문자에 매치

'abcde'.match(/[abk]/]);
//[a]

매치 대상에 a 또는 b 또는 k가 있으면 매치된다.

'abcde'.match(/[bac]/]);
//[a]

매치 대상은 'abcde'다. [a]가 반환된 것은 패턴에 작성한 순서로 값을 반환하지 않고 매치 대상에 작성한 순서로 값을 반환하기 때문이다. 정규 표현식은 b가 매치되었다고 해서 종료하는 것이 아니라 a도 매치하고 c도 매치한다. 그리고 매치 대상에서 가장 앞에 매치된 값을 반환한다.

'abcde'.match(/[cak]/g);
//[a,c]

'정규표현식'.match(/[정표]/g);
//[정,표]

패턴에 지정한 모든 문자를 매치하고 매치되는 문자를 반환하기 때문이다. 패턴에 작성한 순서가 아닌 매치 대상에 작성한 순서로 반환한다.

'111'.match(/[1+]/)
//[1]

/[1+]/ 를 박성 했으면 반환 값은 [1]이다. 이는 더하기 (+)를 패턴 문자가 아닌 일반 문자로 인식하기 대문이다.

구간 [-]

패턴 문자 하이픈(-)은 구간에 속한 값을 매치한다. 하이픈의 앞뒤에 숫자를 지정하면 최소값에서 최대값까지의 범위를 의미한다. [9-0]과 같이 거꾸로 지정하면 에러가 나므로 [0-9]과 같이 값을 거꾸로 지정하면 에러가 나므로 [0-9]와 같이 작은 값을 먼저 쓰고 큰 값을 하이픈 뒤에 쓴다.

'54321'.match(/[0-9]/);
//[5]

매치 대상에 0에서 9까지 숫자가 하나라도 있으면 매치된다. 이렇게 매치해서 반환된 값이 [5]다. 여기서 5는 매치 대상의 첫번째 문자이며 매치 대상에 첫번째를 반환 한다.

'adbd'.match(/[a-e]/g);
//[a,d,b,d]

'가나다라'.match(/[가-라]/g);
//[가,나,다,라]

플래그 g를 사용 했으므로 a에서 e까지 매치된 모든 문자를 반환한다. 그런데 결과 값을 보면 d가 두번 반환 되었다. 물론 매치 대상에 d가 두개 있기 때문이지만 여기서 생각할 것은 패턴을 매치 대상의 문자 단위로 매치 한다는 점이다. 이때도 매치 대상에 작성한 순서로 값을 반환한다.

.
.
.
.
.
.
.

패턴문자 대체(|)

대체(|)는 정규 표현식 내부에서 바(|)의 왼쪽과 오른쪽 모두를 매치하여 자신이 관리하는 영역에 매치 결과를 보관한다.

그리고 왼쪽 인덱스 값이 오른쪽 인덱스 값과 같거나 작으면 왼쪽 매치 결과를 반환하고 아니면 오른쪽 매치 결과를 반환한다.

즉 패턴의 작성된 순서가 아니라 매치된 인덱스가 가장 작은 값을 우선하여 반환한다.

let result = "12_34_56".match(/23|34|56/);
//34

let result2 = "12_34_56".match(/23|56|34/);
//34

플래그 g를 지정하면 매치된 전체 반환

"12_34_56".match(/23|34|56/g);
//[34,56]

플래그 g를 지정하면 패턴에 지정한 값을 전부 매치하여 반환한다.

앞뒤 문자 매치 .

'sports'.match(/.s/);
//[ts]

패턴 /.s/는 매치 대상에 s가 있어야 하며 s 앞에 아무 문자라도 있어야 한다. 매치대상 sport에서 맨 앞에 s가 있지만 s 앞에 문자가 없으므로 매치되지 않았다. 한편 끝의 s는 s앞에 t가 있으므로 매치되어 [ts]를 반환 한다.

'sports'.match(/s./);
//[sp]

패턴 /s./은 매치 대상에 s가 있어야 하며 s 뒤에 아무 문자라도 있어야 한다. 대상 sport에서 맨 앞에 s가 으며 s 뒤에 p가 매치되어 [sp]를 반환한다. 한편 끝의 s는 그 뒤에 문자가 없으므로 매치되지 않는다.

'사랑해 사모해 사해'.match(/사.해/g);
//[사랑해, 사모해]

패턴에 /사.해/g 는 점 앞에 사가 있고 점 뒤에 해가 있으면서 점 위치에는 아무 문자가 있으면 매치된다. '사랑해'와 '사모해'는 이를 만족시키므로 매치되며 '사해'는 점 위치에 문자가 없으므로 매치되지 않는다.

공백 문자

공백문자는 토큰(Token)을 구분하기 위해 사용한다. 자바스크립트에서 토큰은 연결 된 문자열을 의미한다. 문자도 단어도 토큰이며 단어와 단어를 연결해 작성하면 이것도 토큰이다. 공백 문자를 작성하면 토큰이 분리되므로 공백문자는 토큰 안에 올 수 없다.

아래 표에서 NBSP는 Non-Breaking SPace의 약자로 공백 앞 또는 뒤에서 자동으로 줄이 바뀌는 것을 방지하기 위한 특수 기능을 가진 공백 문자다.

문자 맨 앞 매치 캐럿(^)

패턴문자 캐럿(^)으로 매치 대상의 첫 문자부터 매치한다. 패턴에 지정한 문자가 매치 문자열 중간에 있더라도 매치되지 않는다.

"12_34_12".match(/^34/);
//null

"34_12".match(/^34/);
//34

첫번째 예제에서는 34가 매치대상에 있지만 처음에 있지 않고 중간에 있기 때문에 null을 반환하였다.
두번째 예제에서는 34가 맨 앞에 있기 때문에 34를 반환 하였다.

'Javascript\nMultiLine\nMultiLine'.match(/^Multi/);

//null

위의 예제 에서는 null이 반환되는데 매치 대상의 첫 문자가 J이므로 Multi와 매치되지 않기 때문이다.

\n은 줄을 바꾸게 되므로 두번째 줄과 세번째 줄의 시작 문자열 값이 Multi이지만 이를 매치하지 않고 null을 반환한다.

'Javascript\nMultiLine\nMultiLine'.match(/^Multi/gm);

//[Multi, Multi]

위 와 같이 플래그 global과 multiline을 함께 사용하면 줄 전체에서 검색이 가능하다.

문자 끝 매치 $

매치 대상 끝에 매치하는 패턴 문자가 달러($)이다. 패턴에 여러 개의 문자를 지정하면 매치 대상의 끝에서부터 거슬러 올라가면서 모든 문자가 일치해야 매치된다. 하나라도 다르거나 끝이 아니면 매치되지 않는다.

"12_34_12".match(/12$/);
//12

"12_34_12".match(/34$/);
//null

플래그m 멀티라인과 사용할 경우 뒤가 아닌 앞에서 부터 매치하며 반환한다.

"ccStart\u000aStart\u000aStart".search(/Start$/m);
//2

플래그g와m을 사용하면 아래와 같이 줄바꿈 뒤에서 검색하여 배열로 반환한다.

"ccStart\u000aStart\u000aStart".match(/Start$/gm);
//[Start, Start, Start]

.
.
.
.
.
.
.
.
.
.

아래 내용 따로 정리 해야함...

정규표현식과 replace

str_text.replace( /찾을 문자열/gi, 변경할 문자열 );

gi의 의미

g : 전체 모든 문자열 변경 (global)
i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색 (ignore)
\ : 특수 기호를 맨처음 적을 때는 항상 역슬래쉬() 부분이 정규식 맨 앞에 존재 해야함

정규표현식 대괄호 사용 [개별적 변환] 예 )

"4asdf/.asdf/.fsdd4df".replace(/[/4.]/gi, "@");

//@asdf@@asdf@@fsdd@df

대괄호 [ ] 안에 특수기호를 넣으면 하나하나 개별적으로 변환
대괄호 안에 들어 있는 아래 값들을 개별적으로 하나하나 변환
[]문자셋 안에서는 이스케이프 없이 사용할 수 있습니다.

지우는 개별 값
/
4
.

정규표현식 대괄호 사용 안함 [하나의 묶음으로 변환] 예 )

대괄호 [ ] 없이 특수기호 여러개를 작성 /. 하면 하나의 묶음으로 인식해서 변환

"asdf/.asdf/.fsdddf".replace(/\/./gi, "@"); 

//asdf@asdf@fsdddf

정규식	해석
[a-z]	영어 소문자 지정
[A-Z]	영어 대문자 지정
[ㄱ-ㅎㅏ-ㅣ가-힣]	한글 지정
[.,!?]	허용하고자하는 특수문자 지정
[abc]	a, b, c 중 하나를 찾음
[^abc]	a, b, c를 제외한 문자를 찾음
\w	[A-Za-z0-9_]와 동일합니다. 영문자, 숫자, 밑줄을 포함합니다.
+	+앞의 문자가 1회 이상 반복되는 형태를 말합니다.
/.+/g	.이 1회 이상 반복되는 문자열 (., .., ...)
/정규식/ig	i를 붙여 대소문자 구분 없는 검색을 할 수 있습니다.
^	시작을 의미합니다. ^뒤에 붙는 조건으로 시작하는지를 검사합니다.
|	조건을 합칠 때 사용합니다. or 라고 생각하시면 됩니다.
$	끝을 의미합니다. $앞에 붙는 조건으로 끝나는지를 검사합니다.
/^$/	(빈 문자열) 시작문자도, 종료문자도 없으므로 빈 문자열을 나타냅니다.

정규식 예제

// 공백 제거
let checkStr = '안 녕 하 세 요';
checkStr.replace(/\s/g, "");

// 숫자, 공백 제거
let reg = /[0-9 ]/gim;

// 영어(소문자, 대문자), 공백 모두 제거
let reg = /[a-zA-Z ]/gim;

// 특수문자, 괄호, 점, 공백 모두 제거
let reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/ ]/gim;

// 특수문자, 괄호, 점 모두 제거 - 공백은 제거 안함
let reg = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gim;

//특수문자, 괄호, 공백 모두 제거 - 점은 제거 안함
let reg = /[`~!@#$%^&*()_|+\-=?;:'"<>\{\}\[\]\\\/ ]/gim;

//정규식에 해당하는 문자를 replace 로 제거
let resultData = originalData.replace(reg, "");

//첫번째 공백 제거
let resultData = originalData.replace(' ','');	

//특정문자 제거1 (-)
let resultData = originalData.replace(/\-/g,''); 	

//특정문자 제거2(,) 
let resultData = originalData.replace(/,/g,'');

//앞의 공백 제거
let resultData = originalData.replace(/^\s+/,'');	

//뒤의 공백 제거
let resultData = originalData.replace(/\s+$/,'');	

//앞뒤 공백 제거
let resultData = originalData.replace(/^\s+|\s+$/g,'');	

//문자열 내의 모든 공백 제거
let resultData = originalData.replace(/\s/g,'');

//n개행 제거
let resultData = originalData.replace(/\n/g,'');	

//엔터 제거
let resultData = originalData.replace(/\r/g,''); 	

new RegExp() 사용

s값을 입력 받아 one4seveneight 의 값중 영단어를 숫자로 바꾸어 리턴 하는 예제이다.

입출력 예

s	result
"one4seveneight"	1478
"23four5six7"	234567
"2three45sixseven"	234567
"123"	123

function solution(s) {
    
    const words = ['zero','one','two','three','four','five','six','seven','eight','nine'];
    
    for(let i=0; i<words.length; i++){
        var regexAllCase = new RegExp(words[i], "gi");
        s = s.replace(regexAllCase, i);
    }
    
    return Number(s);
}

replace와 match를 사용한 사용 예시

머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는 숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질 때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요.

function solution(order) {
    var answer = 0;
    order = order.toString();
    
    for(let i=0; i<order.length; i++){
        if(order[i] === '3' || order[i] === '6' || order[i] === '9'){
            answer += 1;
        }
    }
    return answer;
}

아래와 같이 변경 할 수 있다.

function solution(order) {
     return (order + '').replace(/[0,1,2,4,5,7,8]/g, '').length
}

function solution(order) {
     var answer = [...order.toString().matchAll(/[3|6|9]/g)].length;
     return answer;
}

function solution(order) {
    return order.toString().split('').filter(n => ['3', '6', '9'].includes(n)).length;
}