정규 표현식 Regular Expression

정규 표현식

• Regular Expression
• 특정 규칙을 가진 문자열을 검색하거나 치환할 때 사용

MDN 참고

---

정규 표현식 객체 생성

• 정규 표현식 리터럴 / RegExp 생성자 함수 사용
• 리터를을 사용하는 것이 일반적. (/패턴/플래그)

// 생성자 함수를 이용한 정규 표현식 객체 생성
let regExp = new RegExp('script');

// 리터럴을 이용한 정규 표현식 객체 생성
let regExp2 = /script/;

// 객체로 
console.dir(regExp, typeof(regExp));
console.dir(regExp2, typeof(regExp2));

객체가 찍히는 것을 볼 수 있다.

실습 때는 패턴을 ‘script’라는 텍스트로 지정하고 진행했다.

RegExp 객체에서 제공하는 메서드

• 객체.text(문자열) : 문자열이 정규식 패턴을 만족하는 값이 있을 경우 ture / 없을 경우 false 리턴
• 객체.exec(문자열) : 만족하는 패턴이 있으면 처음 매치된 문자열 리턴

console.log( `test(str) : ${regExp.test(str)}` ); // ture
console.log( `test(str2) : ${regExp.test(str2)}` ); // falseconsole.log(
console.log( `exec(str) : ${regExp.exec(str)}` ); // script
console.log( `exec(str2) : ${regExp.exec(str2)}` ); // null

---

String 객체에서 정규 표현식 객체를 이용하는 메서드

• 문자열.match(정규식) : 문자열에 정규식 패턴의 값과 일치하는 값을 리턴
• 문자열.replace(정규식, 치환값) : 문자열에 정규식 패턴의 값과 일치하는 부분을 치환값으로 변경(첫번째만)
• 문자열.search(정규식) : 문자열에 정규식 패턴의 값과 일치하는 부분의 시작 인덱스를 리턴
• 문자열.split(정규식) : 문자열에 정규식 패턴의 값과 일치하는 값을 구분자로 하여 배열을 생성하고 리턴

console.log( `match : ${str.match(regExp)}` ); // script
console.log( `replace : ${str.replace(regExp, '스크립트')}` ); // java스크립트 jqueryscript ajax
console.log( `search : ${str.search(regExp)}` ); // 4
console.log( `split : ${str.split(regExp)}` ); // java, jquery, ajax

---

플래그

• /패턴/플래그
• 정규 표현식의 검색 방식 설정
• 순서와 상관없이 하나 이상의 플래그를 동시에 설정 가능

문자	내용
i(ignore)	대소문자 구분 없이 비교
g(global)	전역 비교
m(multi)	다중행 비교

let str = `JAvaScript JQuery Ajax`;
let str2 = `JAvaScript JQuery Ajax<br>JAvaScript JQuery Ajax`;

let regExp1 = /a/;
let regExp2 = /a/i;
let regExp3 = /a/g;
let regExp4 = /a/ig;
let regExp5 = /a/gi;
let regExp6 = /a/gm;

테스트를 위해 변수 지정.

$&

• 패턴을 만족하는 문자열

// 소문자 a를 찾고 a 앞뒤로 () 괄호 추가
console.log( `플래그 없이 : ${str.replace(regExp1, ' ($&) ')}` ); // JAv(a)Script JQuery Ajax

// 대소문자를 구분하지 않기 때문에 첫번째 A에 () 괄호 추가
console.log( `i 플래그 : ${str.replace(regExp2, ' ($&) ')}` ); // J(a)vaScript JQuery Ajax

// 소문자 a에 모두 괄호 추가
console.log( `g 플래그 : ${str.replace(regExp3, ' ($&) ')}` ); // JAv(a)Script JQuery Aj(a)x

// 대소문자 구분없이 모든 a 치환
console.log( `ig 플래그 : ${str.replace(regExp4, ' ($&) ')}` ); // J(A)v(a)Script JQuery (A)j(a)x

console.log( `gi 플래그 : ${str.replace(regExp5, ' ($&) ')}` ); // 위와 동일

// multi line 확인을 위해 str2 사용하여 테스트
console.log( `gm 플래그 : ${str2.replace(regExp6, ' ($&) ')}` );
/*
    JAv(a) Script JQuery Aj(a)x
    JAv(a) Script JQuery Aj(a)x 
*/

.replace() 메서드와 플래그, ‘$&’ 기호를 이용하여 테스트를 했다.
다시 보니까 복잡한데 하나씩 찬찬히.. 보면 괜찮다.

---

메타 문자

• 메타문자를 통해 특정 패턴 제시 가능

반복 검색

문자	내용
{m,n}	패턴이 최소 m번 최대 n번 반복되는 문자열
+	패턴이 최소 한 번 이상 반복되는 문자열
?	패턴이 최대 한 번 이상 반복되는 문자열
^	문자열의 시작
$	문자열의 마지막
[]	패턴과 일치하는 대괄호 내의 문자열
-	범위 지정
.	임의의 문자 한 개

let str = 'a aa aaa aaaa aaaaa aaaaaa'

// {m,n}, +, ?
let regExp = /a{1,2}/g;
console.log( `{1,2} : ${str.replace(regExp, '($&)')}` ); 
// 최소 1번, 최대 2번
// (a) (aa) (aa)(a) (aa)(aa) (aa)(aa)(a) (aa)(aa)(aa)

regExp = /a{3}/g;
area.innerHTML += `{3} : ${str.replace(regExp, '($&)')}`;
// 최대 3번, 최소 3번
// a aa (aaa) (aaa)a (aaa)aa (aaa)(aaa)

regExp = /a{2,}/g;
area.innerHTML += `{2,} : ${str.replace(regExp, '($&)')}`; 
// 최소 2번 이상 반복(3, 4, 5, ...번까지)
// a (aa) (aaa) (aaaa) (aaaaa) (aaaaaa)

regExp = /a+/g;
area.innerHTML += `a+ : ${str.replace(regExp, '($&)')}`;
// 1번 이상 반복
// (a) (aa) (aaa) (aaaa) (aaaaa) (aaaaaa)
// /a{1,}/g;와 동일 

regExp = /a?/g;
area.innerHTML += `a? : ${str.replace(regExp, '($&)')}`;
// 최소 0번, 최대 1번
// (a)() (a)(a)() (a)(a)(a)() (a)(a)(a)(a)() (a)(a)(a)(a)(a)() (a)(a)(a)(a)(a)(a)()
// /a{0,1}/g; 와 동일

// ---------------------------------------------------------------------------------------------

// ^, $
str = 'Javascript Jquery Shellscript Ajax';

regExp = /^j/ig;
console.log( `${str.replace(regExp, '($&)')}` );
// (J)avascript Jquery Shellscript Ajax

regExp = /^j/igm;
console.log( `${str.replace(regExp, '($&)')}` );
// (J)avascript (J)query Shellscript Ajax

regExp = /x$/ig;
console.log( `${str.replace(regExp, '($&)')}` );
// Javascript Jquery Shellscript Aja(x)

regExp = /t$/ig;
console.log( `${str.replace(regExp, '($&)')}` );
// Javascript Jquery Shellscript Ajax < 이게 모두 한 문자열이기 때문에 t로 끝나는 문자 없음
// Javascript Jquery Shellscript Ajax

// ---------------------------------------------------------------------------------------------

// [...]
str = 'Javascript Jquery Ajax';

regExp = /[aj]/ig;
console.log(`/[aj]/ig : ${str2.replace(regExp, '($&)')}` );
// 대소문자 구분 없이 a, j 문자열
// (J)(a)v(a)script (J)query Shellscript (A)(j)(a)x

regExp = /[^aj]/ig; 
console.log(`/[aj]/ig : ${str2.replace(regExp, '($&)')}` );
// a, j를 뺀 나머지 문자열
// 대괄호 밖에서 사용할 경우 시작 문자열, 대괄호 내에서 쓰일 경우 ^xx -> xx를 제외(not)
// Ja(v)a(s)(c)(r)(i)(p)(t)( )J(q)(u)(e)(r)(y)( )(S)(h)(e)(l)(l)(s)(c)(r)(i)(p)(t)( )Aja(x)

regExp = /^[aj]/ig; 
console.log(`/[aj]/ig : ${str2.replace(regExp, '($&)')}` );
// a, j로 시작하는 문자열
// (J)avascript Jquery Shellscript Ajax

// ---------------------------------------------------------------------------------------------
// -
str = '123 Javascript';
regExp = /[a-z]/g;
console.log( `/[a-z]/g : ${str.replace(regExp, '($&)')}` ) ;
// 소문자 a-z까지의 문자

regExp = /[0-9]/g;
console.log( `/[0-9]/g : ${str.replace(regExp, '($&)')}` ) ;

regExp = /[0-9A-Z]/g; // 숫자, 대문자 a-z까지
console.log( `/[0-9]/g : ${str.replace(regExp, '($&)')}` ) ;

// ---------------------------------------------------------------------------------------------
// .
regExp = /..../g; // 아무거나 4개
console.log( `/[0-9]/g : ${str.replace(regExp, '($&)')}` );

---

기타

문자	내용
\d	숫자
\D	숫자를 제외한 문자열
\w	알파벳, 숫자, 언더바(_)
\W	알파벳, 숫자, 언더바(_)를 제외한 문자열
\s	공백 문자 : ‘ ‘, \n, \t
\S	공백 문자 : ‘ ‘, \n, \t를 제외한 문자열

// 숫자
regExp = /\d/g; // /[0-9]/g; 와 동일
console.log( `/\\d/g : ${str.replace(regExp, '($&)')}` );

// 숫자가 아닌 문자열
regExp = /\D/g; // /[^0-9]/g; 와 동일
console.log( `/\\D/g : ${str.replace(regExp, '($&)')}` );

regExp = /\w/g; // /[a-zA-Z0-9_]/g; 와 동일
console.log( `/\\w/g : ${str.replace(regExp, '($&)')}` );

regExp = /\W/g; // /[^a-zA-Z0-9_]/g; 와 동일
console.log( `/\\W/g : ${str.replace(regExp, '($&)')}` );

regExp = /\s/g; // /[ \n\t]/g; 와 동일
console.log( `/\\s/g : ${str.replace(regExp, '($&)')}` );

regExp = /\S/g; // /[^ \n\t]/g; 와 동일
console.log( `/\\S/g : ${str.replace(regExp, '($&)')}` );

---

정규식 테스트

---