정규표현식

Chapter 7] 정규표현식

- 정규표현식의 사전적인 의미는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어이다.

- 프로그램을 작성할 때 특성상 일정한 규칙을 가진 텍스트 문자열을 사용하는 경우가 많은데

  이럴때 정규 표현식을 사용하여 문자열에서 특정 내용을 찾거나 대체할 수 있다.

  특히 웹 프로그래밍은 문자열을 다루는 빈도가 특히 높기 때문에 사용하는게 거의 필수적이다.

- 자바스크립트는 POSIX 정규표현식에서 확장된 Perl방식을 사용한다. 

  이 외에도 수많은 정규표현식이 존재하지만 약간의 차이점을 제외하곤 거의 비슷하다.

- 정규표현식을 실제로 사용할 때 언어마다 사용방법이 각각 다르다.

 자바스크립트의 경우 정규식 리터럴('/' 로 감싸는 패턴) 이나 RegExp 생성자 함수를 이용하는 방법이 있다

//정규식 리터럴 표현법
var re = /\w+\s/;      // <-- / / 로 패턴 구분자 시작과 종료, / / 안에 찾을 문자열의 패턴을 기입

// flag 를 설정시
var re = /\w+\s/g;    // <-- g : flag 설정

// RegExp 생성자 함수를 이용
var re = new RegExp("\\w+\\s");

// flag를 설정시
var re = new RegExp("\\w+\\s", "g");

- 간단한 정규표현식 사용 예제

// /\w+\s/ 패턴은 띄어쓰기 다음에 한개 이상의 문자를 찾는 정규식을 생성합니다. 
var word_space = /\w+\s/;

var temp = "i want cat ";

// match() 함수는 특정 텍스트 안에 검색할 단어, 찾고싶은 단어가 해당 문구에 포함되어있는지 확인한다.
// match() 함수로 정규표현식을 사용하여 특정 패턴을 검색하는 것이 가능하다.
console.log( temp.match(word_space) );  // <-- ["i "] 출력

- 자주 사용하는 flag는 3가지 종류가 있으며, flag는 사용하지 않아도 된다. 

  flag를 설정하지 않은 경우에는 문자열 내에서 검색대상이 많더라도 한번만 찾고 끝나게 됩니다.

g : Global - 문자열 내의 모든 패턴을 찾는다.

i : Ignore Case - 문자열의 대소문자를 구별하지 않는다.

m : Multi Line - 문자열이 행이 바뀌어도 찾는다.

//위 예제에서 global flag를 사용할 경우
var word_space = /\w+\s/g;
console.log( temp.match(word_space) );   // <-- ["i ", "want ", "cat "] 출력

- 이 외에도 공백을 무시하고 주석을 허용하는 x, 개생문자도 포함해서 찾는 s 등 다양한 flag가 있다.

- 정규표현식에서 일정한 의미를 가지고 쓰는 특수문자를 메타 문자라고 부른다. 

  여기에 쓰이는 글자가 포함된 패턴을 넣으려면 해당 글자 앞에 \를 넣어줘야 한다.

^  : 문자열의 시작

$  : 문자열의 종료. 옵션에 따라 문장의 끝 또는 문서의 끝에 매치된다.

.  : 임의의 한 문자

[] : 문자 클래스. 문자 클래스 안에 들어가 있는 문자는 그 바깥에서 하나의 문자로 취급된다.

|  : or를 나타냄

?  : 앞 문자가 없거나 하나 있음

+  : 앞 문자가 하나 이상임

*  : 앞 문자가 0개 이상임

{n,m}  : 앞 문자가 n개 이상 m개 이하. {0,1} 은 ?와 같은 의미다.

{n,}  : 앞 문자가 n개 이상. 위의 형태에서 m이 생략된 형태이다. {0,} 이면 *와 같고 {1,} 이면 +와 같은 의미이다.

()  : 하나의 패턴구분자 안에 서브 패턴을 지정해서 사용할 경우 괄호로 묶어주는 방식을 사용한다.

- 정규표현식의 실제 적용 예제를 몇가지 보자. ( 정규표현식은 자주 쓰지 않으면 금방 잊게된다....)

//그 외 정규식표현의 사용 예제
var test_text = document.getElementById('test_text');

test_text.onkeyup = function(){

  console.log( '입력값 : ' + this.value );

  // 숫자만 사용 정규식
  var reg_number = /^\d+$/;
  // test() 함수는 regexp가 문자열에 일치하면 true를, 일치하지 않으면 false를 반환해준다.
  // test() 함수와 g flag는 같이 사용하면 안된다.
  console.log( reg_number.test( this.value ) );
  
  // 비밀번호 조합(영문, 숫자) 및 길이 체크 정규식
  var reg_password = /^(?=.*[a-zA-Z])(?=.*[0-9]).{4,10}$/;
  //console.log( reg_password.test( this.value ) );
  
  //jpg, gif, png 확장자를 가졌는지 확인
  var reg_image_file = /([^\s]+(?=\.(jpg|gif|png|bmp))\.\2)/;
  //console.log( reg_image_file.test( this.value ) );
  
  //이메일 양식 체크
  var reg_email = /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/;
  //console.log( reg_email.test( this.value ) );

}


//휴대폰 번호 입력 양식 '-' 하이픈 붙이기
var autoHypenPhone = function(str){
      str = str.replace(/[^0-9]/g, '');
      var tmp = '';
      if( str.length < 4){
          return str;
      }else if(str.length < 7){
          tmp += str.substr(0, 3);
          tmp += '-';
          tmp += str.substr(3);
          return tmp;
      }else if(str.length < 11){
          tmp += str.substr(0, 3);
          tmp += '-';
          tmp += str.substr(3, 3);
          tmp += '-';
          tmp += str.substr(6);
          return tmp;
      }else{              
          tmp += str.substr(0, 3);
          tmp += '-';
          tmp += str.substr(3, 4);
          tmp += '-';
          tmp += str.substr(7);
          return tmp;
      }
      return str;
}

var test_text2 = document.getElementById('test_text2');

test_text2.onkeyup = function(){
  //console.log(this.value);
  this.value = autoHypenPhone(this.value);
}


//HTML
<input type="text" id="test_text">
<input type="text" id="test_text2">