정규표현식 사용하기

정규식 사용하기

 

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다.

이 메소드는 JavaScript reference에서 잘 설명되어 있습니다.

 

Method	Description
exec	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
test	대응되는 문자열이 있는지 검사하는 RegExp 메소드입니다. true나 false를 반환합니다.
match	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.
search	대응되는 문자열이 있는지 검사하는 String 메소드입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.
replace	대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
split	정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.

문자열 내부에 패턴과 대응되는 부분이 있는지 알고 싶다면, test나 search메소드를 사용하세요. 좀 더 많은 정보를 원하면 exec나 match 메소드를 사용하세요. 만약 exec나 match 메소드를 사용했는데 대응되는 부분이 있다면, 이 메소드는 배열을 반환하고 정규식 객체의 속성을 업데이트합니다. 만약 대응되는 부분이 없다면, exec 메소드는 null을 반환합니다. (즉, 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");

위의 스크립트에서는, 대응되는 부분이 발견되었고 아래의 표에서 설명하는 대로 배열을 반환하며 속성을 갱신합니다.

Object	Property of index	Description	In this example
myArray		대응된 문자열 및 기억한 모든 부분 문자열	['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
	index	입력된 문자열에서 대응된 부분에 해당하는 인덱스(0부터 시작)	1
	input	입력된 원본 문자열	"cdbbdbsbz"
	[0]	마지막으로 대응된 문자열	"dbbd"
myRe	lastIndex	다음 검색 시 검색을 시작할 인덱스(이 속성은 g 옵션을 설정한 정규식에 대해서만 설정됩니다. 자세한 사항은 Advanced Searching With Flags 부분을 참고하세요)	5
	source	패턴 문자열. 정규식이 생성될 때 갱신됩니다. 실행 시점에는 갱신되지 않습니다.	"d(b+)d"

위 예제에서의 두 번째 형태처럼, 정규식 객체를 변수에 대입하지 않고도 사용할 수 있습니다. 하지만, 이렇게 하면 정규식 객체가 매번 새로 생성됩니다. 이러한 이유로, 만약 변수에 대입하지 않는 형태를 사용하는 경우 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를 들어, 이러한 스크립트가 있을 수 있습니다.

 

var myRe = /d(b+)d/g;
var myArray = mkyRe.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는 서로 다른 정규식 객체이고, 따라서 별개의 lastIndex 속성을 갖게 됩니다. 정규식 객체의 속성을 사용해야 하는 경우라면, 먼저 변수에 대입하세요.

 

괄호로 둘러싼 패턴 사용하기

 정규식 패턴에 괄호를 사용하면, 그 부분을 별도로 대응시키면서 대응된 부분을 기억합니다. 예를 들면, /a(b)c/는 'abc'와 대응되면서 'b'를 기억합니다. 괄호로 감싸진 문자열을 불러오려면, 배열 요소 [1], ..., [n]를 사용하세요.

 

괄호로 감쌀 수 있는 문자의 개수에는 제한이 없습니다. 반환된 배열은 찾아낸 모든 것들을 갖고 있습니다. 다음의 예는 괄호로 둘러싸진 부분이 어떻게 대응되는지 보여줍니다.

 

다음의 예는 문자열 내부의 단어를 바꾸기 위해 replace() 메소드를 이용하고 있습니다. 치환 문자열로는 $1과 $2를 사용하고 있는데, 이는 각각 첫 번째와 두 번째 괄호가 쳐진 부분에 대응된 문자열을 가리킵니다.

 

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

// "smith, John"

플래그를 사용한 고급검색

정규식은 여섯 개의 플래그를 설정해줄 수 있으며, 이를 통해 전역 검색 또는 대소문자 구분 없는 검색을 수행할 수 있습니다. 이 플래그들은 각기 사용될 수도 있고 함께 사용될 수도 있고 순서에 구분이 없습니다.

 

Flag	Description
g	전역 검색
i	대소문자 구분 없는 검색
m	다중행(multi-line) 검색
s	.에 개행 문자도 매칭(ES2018)
u	유니코드: 패턴을 유니코드 코드 포인트의 나열로 취급합니다.
y	"sticky"검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다.

정규식에 플래그를 포함시키려면, 아래 문법을 사용하세요.

var re = /patteren/flgs;

혹은 아래와 같이 할 수도 있습니다.

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

// ["fee", "fi", "fo "]

아래 코드는

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

이렇게 바꿔쓸 수 있습니다.

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

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

 

.exec() 메소드를 사용할 때에는 'g' 플래그에 대한 동작이 다릅니다. (클래스와 인수의 역할이 뒤바뀝니다)

.match()를 사용할 때는, string 클래스가 메소드를 갖고 정규식은 인수였던 것에 반해, .exec()를 사용할 때는 정규식이 메소드를 갖고 문자열이 인수가 됩니다. str.match(re)과 re.exec(str)를 비교해보세요) 'g' 플래그와 .exec() 메소드가 함께 사용되면 진행상황에 대한 정보가 반환됩니다.

 

var xArray; while(xArray = re.exec(str)) console.log(xArray);
// 다음과 같이 출력됩니다.
// ["fee ", index: 0, input: "fee fi fo fum"]
// ["fi ", index: 4, input: "fee fi fo fum"]
// ["fo ", index: 7, input: "fee fi fo fum"]

m 플래그는 여러 줄의 입력 문자열이 실제로 여러줄로서 다뤄져야 하는 경우에 쓰입니다. 만약 m 플래그가 사용되면, ^와 $ 문자는 전체 문자열의 시작과 끝에 대응되는 것이 아니라 각 라인의 시작과 끝에 대응됩니다.

 

예시

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

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

다음 예는 정규식의 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 seperated 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-seperated 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 Reqular 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 < ien; 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>