정규식

정규식은 문자열에서 문자 조합에 일치 시키기 위하여 사용되는 패턴입니다. 자바스크립트에서, 정규식 또한 객체입니다.  이 패턴들은 RegExp의 exec 메소드와 test 메소드  ,그리고 String의  match메소드 , replace메소드 , search메소드 ,  split 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.

정규식 만들기

여러분은 두가지 방법으로 정규식을 구성할 수 있습니다.

정규식은 아래와 같이 사용합니다.

var re = /ab+c/;

정규식 리터럴은 스크립트가 로드됬을 때 정규식의 컴파일을 제공합니다. 정규식이 계속 지속 될 때 이렇게 사용하는 것이 좋습니다.

혹은  RegExp 객체의 생성자 함수를 부릅니다.

var re = new RegExp("ab+c");

생성자 함수를 사용하면 정규식의 런타임 컴파일을 제공합니다. 정규식 패턴이 바뀌는 것을 알거나 패턴을 잘 모를때, 사용자 입력과 같이 다른 소스로부터 패턴을 얻어 올때, 생성자 함수를 쓰는 것이 좋습니다.

정규식 패턴 작성하기

정규식 패턴은 /abc/ 같은 단순한 문자들로 구성되거나, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같은 단순한 문자들과 특수 문자들의 조합으로 구성됩니다. 마지막 예제는 기억장치처럼 쓰이는 괄호를 포함하고 있습니다. 조건을 만족하는 부분은 다음에 사용되기 위하여 패턴화된 부분 문자열 일치 사용하기에서 설명된것 처럼 기억됩니다.

단순한 패턴을 사용하기

단순한 패턴은 직접 찾고자 하는 문자들로 구성됩니다. 예들 들어, /abc/라는 패턴은 문자열에서 정확히 'abc' 라는 문자들이 모두 함께 순서대로 나타나야 일치합니다. 위의 패턴은 "Hi, do you know your abc's?" 와 "The latest airplane designs evolved from slabcraft." 두가지 예 에서 부분 문자열'abc'에서 일치할 것입니다. 위의 패턴은 'Grab crab' 이라는 문자열에서'ab c' 라는 부분 문자열을 포함하고 있지만, 정확히 'abc' 라는 부분 문자열을 포함하지 않기 때문에  일치하지 않을 것입니다.

특수 문자를 사용하기

검색에서 하나이상의 b들을 찾거나, 스페이스를 찾는 등 직접적인 일치보다 더 많은 일치를 필요로 할 경우 패턴은 특수한 문자들을 포함합니다. 예를 들어, 패턴 /ab*c/ 'a'문자 뒤에 0 이상의 'b' 문자(*바로 앞의 문자가 0 이상의 개수가 나타는 것을 의미합니다)와 바로 뒤에'c' 가있는 문자 조합에 일치합니다. 문자열 "cbbabbbbcdebc," 에서 위의 패턴은 부분 문자열 'abbbbc' 에 일치합니다.

다음의 표는 정규식에서 사용되는 특수문자에 대한 목록과 설명을 제공합니다.

정규식 내에서, 단순한 문자열로 취급되는 사용자 입력을 이스케이프 하는 것은 간단한 재배치로 할 수 있습니다:

function escapeRegExp(string){
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

괄호를 사용하기

정규식의 어떤 부분을 둘러싼 괄호는 일치한 부분 문자열을 기억하게 합니다. 일단 기억된다면, 부분 문자열은 패턴화된 부분 문자열 일치 사용하기에서 설명되는것 처럼 다른곳에 사용하기 위하여 호출 될 수 있습니다.

예를 들면, 패턴 /Chapter (\d+)\.\d*/는 추가적으로 이스케이프 되거나 특수 문자 를 이용하고, 그 패턴의 부분이 기억될것이라고 나타냅니다. 이 패턴은 잇달아 하나 이상의 숫자(\d는 숫자를 의미하고 +는 1개 이상을 의미합니다.)와 하나의 소숫점(스스로가 특수문자인; \가 앞서는 소숫점은 패턴은 무조건 문자 그대로의 문자 '.' 을 찾아야 한다는 의미입니다), 0개 이상의 숫자(\d 는 숫자, * 0개 이상을 의미합니다.)가 뒤따라오는 'Chapter '문자들에 정확하게 일치합니다. 추가적으로, 괄호는 처음으로 일치하는 숫자를 기억하기 위하여 쓰였습니다.

이 패턴은 "Open Chapter 4.3, paragraph 6"에서 찾을 수 있으며, '4'가 기억됩니다. 이 패턴은 "Chapter 3 and 4"에서는 찾을 수 없습니다. 왜냐하면 문자열이 '3'이후에 마침표를 가지고 있지 않기 때문입니다.

일치한 부분을 기억하지 않고 부분 문자열을 일치하기 위해선, 괄호에 ?:패턴을 서문으로 쓰세요. 예를 들어, (?:\d+)는 1개 이상의 숫자에 일치하지만 일치하는 문자들을 기억하지 않습니다.

정규식 사용하기

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다.

한 패턴이 어떤 문자열에서 나온 것인지 알고 싶으면, test 나 search 메소드를 사용하는게 좋습니다; 좀더 많은 정보를 원하면 (대신 실행이 느림)  exec 나 match 메소드를 사용하는게 좋습니다. 만약 exec 나 match 메소드를 사용했는데 일치하는 부분이 있으면 이 메소드는 배열을 반환하고 정규식 객체에 관련된 properties나 앞서 정의된 정규식 객체인 RegExp properties를 업데이트 합니다. 만약 일치하지 않으면, exec 메소드는 null 을 반환합니다.(which coerces to false).

아래의 예에서는, 일치하는 문자열을 찾기 위해 exec 메소드를 사용했습니다.

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");

만약 정규식 속성에 접근할 필요가 없다면, 아래와 같이 myArray를 만드는 대체적인 방법도 있습니다.

var myArray = /d(b+)d/g.exec("cdbbdbsbz");

문자열로부터 정규식을 구성하고 싶다면, 이런 방법도 있습니다:

var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

이 스크립트에서, 매칭이 성공하고 배열을 반환한 뒤 아래의 표에서 보이는 대로 속성을 갱신합니다.

이 예의 두번째 형식처럼, 변수로 지정하지 않고 객체 초기화로 만들어진 정규식을 사용 할수 있습니다. 하지만 만약 그러면 매 어커런스는 새 정규식이 됩니다. 이러한 이유로 만약 변수로 지정하지 않고 이러한 형식을 사용하게 되면, 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를들어, 이러한 스크립트가 있을 수 있습니다.

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + myRe.lastIndex);

// "The value of lastIndex is 5"

그러나, 만약 이러한 스크립트가 있으면:

var myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);

// "The value of lastIndex is 0"

두 상태의 /d(b+)d/g 어커런스는 다른 정규식 객체이고 이런 이유로 그것의 다른 마지막 위치 속성 값을 갖게 됩니다. 만약 객체 초기화된 정규식 속성의 접근이 필요하다면, 먼저 변수로 지정해야 합니다.

패턴화된 부분 문자열 일치 사용하기

정규식 패턴에서 소괄호를 포함하는 것은 기억되는 서브매칭에 해당하는 것을 발생시킵니다. 예를들면, /a(b)c/ 는 'abc' 와 매칭시키고 'b'를 기억합니다. 이러한 소괄호가 쳐진 일치하는 문자열을 불러오기 위해, 배열 요소 [1], ..., [n] 를 사용합니다.

소괄호가 가능한 문자열의 수는 제한이 없습니다. 반환된 배열은 찾아낸 모든 것들을 갖고 있습니다. 다음의 예는 소괄호가 쳐진 일치하는 문자열들을 어떻게 이용하는지 보여 주고 있습니다.

다음의 예는 문자열의 단어를 바꾸기 위해 replace() 메소드를 이용하고 있습니다. 글자를 바꾸기 위해, 이 스크립트는 첫번째와 두번째 소괄호가 쳐진 일치하는 문자열을 의미하는 대체물의 $1 과 $2 를 사용하고 있습니다.

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr);

이것은 "Smith, John"을 출력합니다.

플래그를 사용한 고급검색

정규식은 전반적이고 대소문자를 구분하지 않는 검색을  따르는 네가지 선택적인 표기 방식이 있습니다.

정규식과 플래그를 포함하기 위하여 이 문장을 사용합니다:

var re = /pattern/flags;

혹은

var re = new RegExp("pattern", "flags");

이 플래그는 정규식의 필수적인 부분임을 기억 하는게 좋습니다. 이것들은 나중에 추가되거나 제거될 수 없습니다.

예를들어, re = /\w+\s/g 는 띄어쓰기 다음에 한개 이상의 문자를 찾는 정규식을 생성합니다. 그리고 문자열 도처의 조합을 찾습니다.

var re = /\w+\s/g;
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

이것은 ["fee ", "fi ", "fo "]를 보여줍니다. 이 예에서:

var re = /\w+\s/g;

이 라인은 이렇게 치환 될 수 있습니다:

var re = new RegExp("\\w+\\s", "g");

그리고 똑같은 결과를 얻습니다.

m 플래그는 여러줄의 입력 문자열이 여러 줄로 다뤄져야 하는 특별한 경우에 쓰입니다. 만약 m 플래그가 사용되면, ^ 와 $ match at 전체 문자열의 시작과 끝 대신에 입력 문자열 안의 어느 시작점과 끝에 일치시킵니다.

예시

다음의 예는 정규 표현식의 몇 가지 사용법을 보여줍니다.

입력 문자열에서 순서를 변경하기

다음 예는 정규식의 형성 과정, string.split()과 string.replace()의 사용을 설명합니다. 그것은 공백, 탭과 정확히 하나의 세미콜론의 구분으로 이름(이름을 먼저)이 포함된 대략 형식의 입력 문자열을 정리합니다. 마지막으로, 순서(성을 먼저)를 뒤바꾸고 목록을 정렬합니다.

// The name string contains multiple spaces and tabs,
// and may have multiple spaces between first and last names.
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

// Prepare two regular expression patterns and array storage.
// Split the string into array elements.

// pattern: possible white space then semicolon then possible white space
var pattern = /\s*;\s*/;

// Break the string into pieces separated by the pattern above and
// store the pieces in an array called nameList
var nameList = names.split(pattern);

// new pattern: one or more characters then spaces then characters.
// Use parentheses to "memorize" portions of the pattern.
// The memorized portions are referred to later.
pattern = /(\w+)\s+(\w+)/;

// New array for holding names being processed.
var bySurnameList = [];

// Display the name array and populate the new array
// with comma-separated names, last first.
//
// The replace method removes anything matching the pattern
// and replaces it with the memorized string—second memorized portion
// followed by comma space followed by first memorized portion.
//
// The variables $1 and $2 refer to the portions
// memorized while matching the pattern.

output.push("---------- After Split by Regular Expression");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}

// Display the new array.
output.push("---------- Names Reversed");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

// Sort by last name, then display the sorted array.
bySurnameList.sort();
output.push("---------- Sorted");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

입력을 확인하기 위해 특수 문자를 사용하기

다음 예에서, 사용자는 전화번호를 입력 할 것으로 예상됩니다. 사용자가 "Check" 버튼을 누를 때, 스크립트는 번호의 유효성을 검사합니다. 번호가 유효한 경우(정규식에 의해 지정된 문자 시퀀스와 일치합니다), 스크립트는 사용자에게 감사하는 메시지와 번호를 확인하는 메시지를 나타냅니다. 번호가 유효하지 않은 경우, 스크립트는 전화번호가 유효하지 않다는 것을 사용자에게 알립니다.

비 캡처링 괄호 (?: , 정규식은 세 자리 숫자를 찾습니다 \d{3} OR | 왼쪽 괄호\( 세 자리 숫자 다음에 \d{3}, 닫는 괄호 다음에 \), (비 캡처링 괄호를 종료)) 안에, 하나의 대시, 슬래시, 또는 소수점을 다음과 같이 발견했을 때,  세 자리 숫자 다음에 d{3}, 대시의 기억 매치, 슬래시, 또는 소수점 다음에 \1, 네 자리 숫자 다음에 \d{4} 문자를 기억합니다([-\/\.]).

사용자가 <Enter> 키를 누를 때 활성화 변경 이벤트는 RegExp.input의 값을 설정합니다.

<!DOCTYPE html>
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
    <meta http-equiv="Content-Script-Type" content="text/javascript">  
    <script type="text/javascript">  
      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;  
      function testInfo(phoneInput){  
        var OK = re.exec(phoneInput.value);  
        if (!OK)  
          window.alert(OK.input + " isn't a phone number with area code!");  
        else
          window.alert("Thanks, your phone number is " + OK[0]);  
      }  
    </script>  
  </head>  
  <body>  
    <p>Enter your phone number (with area code) and then click "Check".
        <br>The expected format is like ###-###-####.</p>
    <form action="#">  
      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
    </form>  
  </body>  
</html>