Javascript - 정규식(RegExp)

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

정규식(RegExp)

 

• 정규식이란?

정규식은 패턴을 통해 고차원적인 검색을 가능하게 하는 기능이다.

<기본 개념>

//문자열을 검색하는 함수에서의 정규식 사용여부 비교

//정규식을 사용하지 않는 경우

var str = "Hello World";

console.log(str.search("World"));

// 결과 : 6

//6은 찾고자 하는 문자열(World)이 시작하는 인덱스 번호를 의미한다.


console.log(str.search("world"));
 
// 결과 : -1
 
//여기서 -1은 검색 불가의 의미이다.
//world 문자열의 w가 소문자이기 때문에, 변수 str에서 찾지 못하는 것이다.
 
 
//정규식을 사용하는 경우

var str = "Hello World";
 
console.log(str.search(/World/i)); 

// 결과 : 6

//여기서 World는 정규식의 '패턴'으로 검색하고자 하는 키워드를 의미하며, 
//i는 정규식의 'modifier'로 대·소문자 상관없이 해당 키워드를 찾겠다는 의미이다.


console.log(str.search(/world/i));

// 결과 : 6

//정규식의 modifier 'i'를 사용하면, 대·소문자 상관없이 해당 키워드를 찾기 때문에
//검색이 가능하며 결과 값이 6으로 나온다.



//문자열을 교체하는 함수에서의 정규식 사용여부 비교

//정규식을 사용하지 않는 경우

var str = "Hello WORLD!, world!";

console.log(str.replace("world", "James"));

// 결과 : Hello WORLD!, James!

//대문자 WORLD는 교체하지 못하고, 소문자 world만 James로 교체한다.


//정규식을 사용하는 경우

var str = "Hello WORLD!, world!";

console.log(str.replace(/world/i, "James"));

// 결과 : Hello James!, world!

//대·소문자 상관없이 교체대상을 찾기는 하지만, 맨 처음 나오는 대상만을 교체한다.


console.log(str.replace(/world/ig, "James"));

// 결과 : Hello James!, James!

//대·소문자 상관없이, 모든 교체대상을 찾아서 교체한다.
//여기서 modifier 'g'를 사용하면, 해당되는 모든 대상에 관련 기능을 적용한다.

<응용 개념 : 정규식의 다양한 패턴>

var str = "Is this all there is";
var patt1 = /[hat]/g;              
var result = str.match(patt1);      

console.log(result);

// 결과 : ["t", "h", "a", "t", "h"]

//[abc]패턴은 대괄호안에 있는 글자 하나 하나(a, b, c)를 해당 문자열에서
//모두 찾겠다는 의미이다.

//여기서 match( ) 함수는 결과 값을 배열로 보여주는 함수이다.[정규식을 위한 함수]


var str = "123abc4562314kkk";
var patt1 = /[0-9]/g;               
var result = str.match(patt1);

console.log(result);

// 결과 : ["1", "2", "3", "4", "5", "6", "2", "3", "1", "4"]

//[0-9]패턴은 해당 문자열에서 0부터 9까지 모두 찾겠다는 의미이다.


var str = "Giva 100";
var patt1 = /\d/g;                  
var result = str.match(patt1);

console.log(result);

// 결과 : ["1", "0", "0"]

//\d패턴은 모든 숫자를 다 찾겠다는 의미이다.([0-9]패턴과 유사한 기능)


var str = "Giva 100";
var patt1 = /\s/g;                     
var result = str.match(patt1);

console.log(result);

// 결과 : [" "]

//\s패턴은 해당 문자열에서 공백을 찾겠다는 의미이다.


var str = "re, green, red, gree, gen, red, blue, yellow";
var patt1 = /(red|green)/g;        
var result = str.match(patt1);

console.log(result);

// 결과 : ["green", "red", "red"]

//(a|b)패턴은 a 혹은 b를 찾겠다는 의미이다.


var str = "HELLO, LOOk AT ME!";
var patt1 = /\bLO/g;                
var result = str.search(patt1);

console.log(result);

// 결과 : 7

//\b패턴은 \b뒤에 오는 글자로 시작하는 문자열을 찾겠다는 의미이다.

//\bLO이면 문자열의 시작이 'LO'인 문자열을 찾겠다는 의미이며, 
//해당 문자열의 시작점을 인덱스 번호로 알려준다.


var str = "Hellooo";
var patt1 = /o+/g;

console.log(str.match(patt1));

// 결과 : ["ooo"]

//+패턴은 +앞에 있는 문자가 1개 이상 있다면, 모두 찾겠다는 의미이다.


var str = "Hellooo World";
var patt1 = /lo*/g;

console.log(str.match(patt1));

// 결과 : ["l", "looo", "l"]

//*패턴은 *앞에 있는 문자(o)가 0개 또는 n개인 문자열을 모두 찾겠다는 의미이다.

//위의 결과는 lo에서 o가 0개이면 l이 되기 때문에 l을 찾는 것이며,
//o가 3개인 looo도 함께 찾는 것이다.


var str = "1, 100 or 1000";
var patt1 = /10?/g;

console.log(str.match(patt1));

// 결과 : ["1", "10", "10"]

//?패턴은 ?앞에 있는 문자(o)가 0개 혹은 1개인 문자열을 모두 찾겠다는 의미이다.

//위의 결과는 ?앞에 있는 문자(o)가 0개이면 1이 되기 때문에 1을 찾는 것이며,
//o가 1개이면 10이 되기 때문에 100과 1000을 모두 10으로 찾는 것이다.

 

 

• 정규식 실무활용 예시

<우편번호 5자리가 모두 숫자인지 확인하는 정규식 코드>

var patt1 = /\d{5}/;            
var postalcode = "23452";

console.log(patt1.test(postalcode));

// 결과 : true

//\d의{ }안에 숫자는 숫자의 자리수를 의미한다.(즉, 5자리로 된 숫자를 찾겠다는 의미)

//test( ) 함수는 정규식 함수이므로, match( ), search( ) 함수와
//문법이 조금 다르다.

//patt1.test(postalcode)와 str.match(patt1)의 코드를 비교해볼 것


var patt1 = /\d{5}/;
var postalcode = "P24143Z";

console.log(patt1.test(postalcode));

// 결과 : true

//이 경우에도 true 값이 나온다.(해당 문자열에 5자리 숫자가 있기만 하면 true 값을 출력) 

//이러한 문제를 해결하기 위해서는 코드를 아래와 같이 수정해야 한다.


var patt1 = /^\d{5}$/;                      
var postalcode = "P24143Z";

console.log(patt1.test(postalcode));

// 결과 : false

//^는 무조건 ^뒤에 있는 것으로 시작해야 함을 의미하기 때문에,
//^\d는 숫자로 시작해야 함을 뜻한다.

//$는 $이 있는 위치에서 정규식을 끝내겠다는 것을 의미하기 때문에,
//^\d{5}$는 숫자로 시작하고 5자리의 숫자에서 정규식을 끝내겠다는 것을 뜻한다.

//숫자로 시작하지도 않고, 숫자 5자리로 끝나지도 않기 때문에 false 값이 나온 것이다.


var patt1  = /^\d{5}$/;
var postalcode = "48391";

console.log(patt1.test(postalcode));

// 결과 : true

//숫자로 시작하고, 숫자 5자리이기 때문에 true 값이 나온 것이다.

<전화번호가 010-1234-5678의 형태인지 확인하는 정규식 코드>

var patt1 = /^(010)-\d{4}-\d{4}$/;          
var tel = "010-2341-5354";

console.log(patt1.test(tel));

// 결과 : true

//^(010)은 010으로 시작하고 ( )안 숫자를 한 번에 비교하라는 의미이며,
//-\d{4}는 '-' 다음에 숫자 4자리가 나온다는 것을 의미하고,
//-\d{4}$는 '-' 다음에 숫자 4자리가 나오고 정규식이 끝난다는 것을 뜻하기 때문에,
//결과 값으로 true가 나온 것이다.


var patt1 = /^(010)-\d{4}-\d{4}$/;                       
var tel = "011-2341-5354";

console.log(patt1.test(tel));

// 결과 : false   

//010으로 시작하지 않기에, 결과 값으로 false가 나온 것이다.

<이메일 주소가 정확한 형식이 맞는지 확인하는 정규식 코드>

var patt1 = /^\w+([\.-]?\w+)*@\w+(\.\w{2,3})+$/;

console.log(patt1.test("abcde.1234@gmail.com"));   // 결과 : true
console.log(patt1.test(".1234@gmail.com"));        // 결과 : false
console.log(patt1.test("abcde1234@gmail.com"));    // 결과 : true
console.log(patt1.test("abcde1234@gmail.co.kr"));  // 결과 : true
console.log(patt1.test("abcde1234@.com"));         // 결과 : false

//해석

//\w패턴은 문자열을 의미하고 +패턴은 +앞에 문자가 1개 이상있다면 찾겠다는 의미이므로,
//^\w+는 최소 1개 이상의 문자로 시작하는 것을 찾겠다는 의미이다.

//( )는 한 묶음으로 보겠다는 것을 의미하고 ?패턴은 ?앞에 문자가 0개 또는 1개 있다면,
//찾겠다는 의미로 [\.-]?는 .과 -가 있을 수도 있고 없을 수도 있다는 의미이다.

//또한, +패턴은 +앞에 문자가 1개 이상 있다면 찾겠다는 의미이므로,
//([\.-]?\w+)는 .과 -가 있을 수도 있고 없을 수도 있다는 의미와 함께,
//[\.-]?와 \w+를 한 묶음으로 보면서 .과 -뒤에 문자열이 최소 1개가 있다면
//찾겠다는 의미이다.

//즉, ^\w+([\.-]?\w+)는 최소 1개 이상의 문자로 시작하며, 
//해당 문자 뒤에 .과 -가 최소 1개의 문자열과 함께 올 수 있다는 의미이다.
//(단, .앞에 \는 .이 특수문자이므로 .을 일반문자로 바꾸기 위해 사용한 것)

//한편, *패턴은 *앞에 있는 문자가 0개 또는 n개가 있다면 찾겠다는 의미이며,
//([\.-]?\w+)*는 ([\.-]?\w+)가 있을 수도 있고 없을 수도 있다는 의미이다.

//@\w+(\.\w{2,3})+$는 @가 나오고 그 뒤에 최소 1개의 문자열이 나온 후,
//(\.\w{2,3})가 최소 1개 이상 나오고(1번 이상 반복) 그 이후에 정규식을
//끝내겠다는 의미이다.

//참고로 (\.\w{2,3})은 일반문자 .뒤에 2자리 혹은 3자리의 문자열이 온다는 의미로,
//.과 \w{2,3}를 한 묶음으로 보겠다는 의미이다.
//(단, 여기서 \w{ }의 { }안 숫자는 문자열의 자리수를 의미)