원글 : http://www.nextree.co.kr/p4327
정규표현식
날이 갈수록 개인정보 보호에 관련하여 보안정책을 점진적으로 강화하고 있습니다. 이에 따라 Web에서 회원가입 시 Password 설정을 복잡해진 보안정책에 맞추다 보니 복잡하게 조합해야만 정상적으로 가입을 할 수 있습니다. 이러한 강화된 보안정책 때문에 기존에 사용하던 자신만의 Password를 인위적으로 보안정책에 맞추는 경우가 많을 것입니다. 그러다 보니, 종종 Log-In을 할 때 Password를 잊어버려서 곤란한 상황이 발생하는 경우도 한번쯤은 있었을 것입니다. 일반적으로 이렇게 복잡한 조건이 필요한 경우 사용자에게 입력을 받을 때 여러 가지 조건을 주면서 정해진 규칙 안에서만 입력을 하도록 유도를 하고 있습니다. 이번 프로젝트를 진행하면서 사용자가 입력하여 DB에 형식에 맞도록 저장하기 위해 조건을 주는 부분이 있었는데, 간단하게 해결 하기 위해 정규표현식(Regular Expression)을 사용하였습니다. 이 글에서는 정규표현식을 실제로 사용하면서 필요한 정보들을 초보 개발자의 관점에서 해석하고 실제로 사용하는 과정을 담았습니다.
정규표현식이란?
정규표현식의 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어입니다. 주로 Programming Language나 Text Editor 등 에서 문자열의 검색과 치환을 위한 용도로 쓰이고 있습니다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수도 있지만, 정규표현식을 이용하면 매우 간단하게 표현 할 수 있습니다. 하지만 코드가 간단한 만큼 가독성이 떨어져서 표현식을 숙지하지 않으면 이해하기 힘들다는 문제점이 있습니다.
*정규표현식을 지원하는 프로퍼티・메서드가 있고, 지원하지 않는 프로퍼티・메서드가 있으므로 정규식을 사용하고 싶다면 먼저 사용하고자 하는 프로퍼티・메서드 파라미터 정보를 확인하여야 합니다. 예를 들어, match,replace함수는 정규표현식을 파라미터로써 용인합니다. 하지만, workbook.Open함수는 순수한 스트링만을 파라미터로써 용인하기 때문에 정규표현식을 파라미터로써 사용할 수 없습니다.
자바스크립트에서 정규식 사용법 : //으로 감싸기
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/i
var patt = /w3schools/iExample explained:
- /w3schools/i is a regular expression.
- w3schools is a pattern (to be used in a search).
- i is a modifier (modifies the search to be case-insensitive).
For a tutorial about Regular Expressions, read our JavaScript RegExp Tutorial.
Modifiers
Modifiers are used to perform case-insensitive and global searches:
| Modifier | Description |
|---|---|
| i | Perform case-insensitive matching |
| g | Perform a global match (find all matches rather than stopping after the first match) |
| m | Perform multiline matching |
정규표현식 표현방법
정규표현식은 표준인 POSIX의 정규표현식과 POSIX 정규표현식에서 확장된 Perl방식의 PCRE가 대표적이며, 이외에도 수많은 정규표현식이 존재하며 정규표현식 간에는 약간의 차이점이 있으나 거의 비슷합니다. 정규표현식에서 사용하는 기호를 Meta문자라고 합니다. Meta문자는 표현식 내부에서 특정한 의미를 갖는 문자를 말하며, 공통적인 기본 Meta문자의 종류로는 다음과 같습니다.
Meta 문자중에 독특한 성질을 지니고 있는 문자클래스'[ ]'라는 문자가 있습니다. 문자클래스는 그 내부에 해당하는 문자열의 범위 중 한 문자만 선택한다는 의미이며, 문자클래스 내부에서는 Meta문자를 사용할 수 없거나 의미가 다르게 사용됩니다.
POSIX에서만 사용하는 문자클래스가 있는데, 단축키처럼 편리하게 사용할 수 있습니다. 대표적인 POSIX 문자클래스는 다음과 같으며 대괄호'[ ]' 가 붙어있는 모양 자체가 표현식이므로 실제로 문자클래스로 사용할 때에는 대괄호를 씌워서 사용해야만 정상적인 결과를 얻을 수 있습니다.
이밖에도 [:cntrl:] : 아스키 제어문자(0~31번, 127번), [:print:] : 출력 가능한 모든 문자, [:xdigit:] : 모든 16진수 숫자 등이 있습니다.
정규표현식을 실제로 사용할 때 언어마다 사용방법이 각각 다릅니다. 진행했던 프로젝트에서는 정규표현식을 JavaScript에서 사용했는데, JavaScript에서 사용하는 방법에 대해서 설명 하겠습니다. 사용하는 JavaScript 버전이 1.1이하 버전일 경우에는 정규표현식을 사용할 수 없습니다. 정규표현식을 사용하는 방법으로는 두 가지가 방법이 존재하며, 첫 번째로는 'RegExp'객체를 이용하는 방법이 있습니다. 주로 정규표현식이 자주 변경되는 경우 사용합니다.
// RegExp 객체를 이용하는 방법
var objectInitializer = new RegExp('정규표현식',['Flag']);
두 번째로는 객체초기화(Object Initializer)를 사용하는 방법입니다. 주로 입력된 표현식이 거의 바뀌지 않는 상수 형태의 표현식을 사용할 때 사용합니다.
// 객체초기화(Object initializer) 방법
var regExp = /정규표현식/[Flag];
Flag의 종류
자주 사용하는 Flag는 밑의 3종류가 있으며 Flag를 사용을 하지 않을 수도 있습니다. 만약 Flag를 설정 하지 않을 경우에는 문자열 내에서 검색대상이 많더라도 한번만 찾고 끝나게 됩니다.
jhkim-140117-RegularExpression-09
이 외에도 공백을 무시하고 주석을 허용하는 x, 개행문자도 포함해서 찾는 s 등 다양한 Flag들이 있습니다.
정규표현식 실제 적용
사용자로부터 값을 입력 받는 부분에서 유효성 체크를 하기 위해 정규표현식을 간단하게 적용한 경우가 있었습니다. 먼저 입력 받은 값은 반드시 한글이 포함되지 않도록 유효성 체크를 하는 부분이 있었습니다. 사용자가 입력한 데이터 중에서 유효하지 않는 데이터를 정규표현식을 이용하여 검색한 뒤 Return하는 방법을 사용하였습니다.
//사용자가 입력한 ID가 한글이 포함되어 있는지 Check 합니다.
function idCheck () {
// 입력한 ID를 Check하기 위해 가져옵니다.
var titleCheck = $("titleId").val;
// 정규표현식으로 한글만 선택하도록 만듭니다.
var languageCheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
// 입력한 ID와 정규표현식을 비교하여 한글 여부를 판단합니다.
// test외에도 search ,exec , match등을 사용할 수 있습니다.
if (languageCheck.test(titleCheck)) {
alert("ID에 한글이 포함되어 있습니다.");
return;
}
...
}
다음으로는 8자리 이하 정수로 이루어진 x, y 좌표를 사용자로부터 입력 받는 경우가 있었습니다. 사용자가 조건에 충족하지 않은 값을 입력할 경우 DB에 적재 할 때나 좌표를 활용할 때 문제가 발생할 수 있기 때문에 유효성 체크가 필요했습니다. 사용자가 값을 입력할 때마다 유효한 값인지 체크를 하고, 잘못된 값을 입력하면 그 값은 Null로 치환을 하는 방법을 사용했습니다. 사용자 입장에서는 유효하지 않은 값을 입력하면 값을 입력하는 순간 아무런 동작을 하지 않은 것처럼 보입니다.
// 8자리 이하인 숫자인지 Check 하는 Function
// 사용자가 Key를 입력할 때마다 Function이 호출되도록 구현하였습니다.
function checkNumber (data) {
// 사용자가 입력한 값을 Check를 위해 변수에 넣습니다.
var checkData = data.value;
// 입력한 값이 8자리가 넘어가는지 Check를 합니다.
if ( checkData.length > 8 ) {
// 8자리가 넘어가면 8자리까지만 표현하고 나머지는 제외합니다.
data.value = checkData.substring(0,8);
} else {
// 8자리 이하일 경우
// Number형이 아닌값이 입력되면 입력값을 null값으로 대체합니다.
data.value = checkData.replace(/[^0-9]/g, '');
}
}
정규표현식으로 조건을 구현하니 매우 간단하게 해결하였습니다. 이 밖에도 Email Check, File 확장자 Check, 주민등록번호 Check, 문자열 공백제거, 문자열 첫 글자 대문자로 치환 등등 정규표현식을 이용하여 다양한 형태의 유효성검사를 구현할 수 있습니다. 정규표현식을 구현하면서 유용한 Utility들이 있습니다. 물론 이러한 Utility들은 Web에서 다양하게 찾아 볼 수 있지만 프로젝트를 진행하면서 유용하게 사용했던 Utility두가지에 대해서 간단하게 소개하도록 하겠습니다. 먼저 사용자가 정규표현식을 작셩하고 직접 원하는 문자열을 Test 할 수도 있고, quality 높은 표현식을 구현하는데 도움을 주는 Utility입니다. 정규표현식에 대해서 지식이 부족한 사용자도 우측의 정규식 표현 Sample과 그에 대한 설명이 자세하게 나와있어서 쉽게 구현할 수 있습니다. 프로그램을 다운받지 않고 Web에서 직접 실행하므로 별다른 설치 없이도 즉시 사용할 수 있는 편리성이 있습니다. 하지만 Web에서 실행하므로 Off-Line에서는 지원이 안되며, 프로그램 내부에서 전체적으로 Font Size가 작다는 단점이 있습니다.
두번째 Utility는 표현식을 쉽게 이해할 수 있도록 도식화 하는 Utility입니다. 앞에서 정규표현식 표현방법을 소개 할 때 쉽게 이해할 수 있도록 도식으로 처리한 부분도 이 Utility를 이용하여 직접 구현하였습니다. 이 Utility는 표현식을 구현하기 보다는 복잡한 표현식을 해석하고 이해하는 목적이 가장 알맞다고 생각합니다. 프로젝트를 진행하면서 직접 구현한 표현식이 도식으로 목적에 맞게 구현 되는지 Test 할 수 있습니다. 정규표현식에 대해 어느 정도 지식을 갖추고 있는 사용자들에게 적합하다고 생각합니다. 이 Utility도 앞선 Utility와 마찬가지로 Web에서 별다른 설치 없이 즉시 사용 가능합니다.
글을 마치며...
정규표현식은 자주 쓰지 않으면 금방 잊게 되는 수학공식과 같은 존재라고 생각합니다. 정규표현식에 대해서는 오래전부터 접해보긴 했지만, 매번 수박 겉 핥기 식의 학습으로 인해 정규표현식을 접할 때마다 새로운 느낌을 받았습니다. 이번에 정규표현식에 대해 글을 쓰는 목적 중에 하나는 회사 블로그에 글을 올리면서 이러한 얕은 지식을 정리하고 내 것으로 만드는 계기가 되도록 하는 마음으로 선택하였습니다. 이번 프로젝트에는 정규표현식을 다양하게 사용하지 못해서 한정된 부분만 구현하였지만, 기본 표현법만 제대로 익히면 JavaScript 이외에 다양한 정규표현식에서도 쉽게 응용할 수 있다고 생각합니다.
참조 Site
정규표현식 - wiki백과 http://ko.wikipedia.org/wiki/정규표현식
정규표현식의 기본 문법 정리표 http://blog.daum.net/creazier/15309380
정규표현식 사용하기 http://icoon22.tistory.com/220
정규식이란 무엇인가 http://twinstarbox.tistory.com/entry/Java-정규식이란-무엇인가
자바스크립트 정규 표현식 http://yaku.tistory.com/75
Perl 정규표현식, 메타데이타 http://blog.naver.com/PostView.nhnblogId=turtle1006&logNo=60107758671
정규표현식 관련 Utility Site
정규표현식 Test 및 생성 Util http://gskinner.com/RegExr/
정규표현식 도식화 표현Util http://www.regexper.com/
규식은 문자열에서 문자 조합에 일치 시키기 위하여 사용되는 패턴입니다. 자바스크립트에서, 정규식 또한 객체입니다. 이 패턴들은 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' 와 일치합니다.
다음의 표는 정규식에서 사용되는 특수문자에 대한 목록과 설명을 제공합니다.
| Character | Meaning |
|---|---|
\ | 다음의 규칙에 따라 일치합니다: |
^ | 입력의 시작에 일치합니다. 만약 다중 선 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음에서도 일치합니다. 예를 들어, /^A/ 는 "an A" 의 'A'에 일치하지 않습니다, 그러나 "An E" 의 'A'에서는 일치합니다.' ^' 는 문자셋([abc]) 패턴의 첫글자로 쓰인다면, 다른의미를 가집니다. 더 자세한 내용은역 문자셋을 참고하세요. |
$ | 입력의 끝을 일치합니다. 만약 다중 선 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 뒤에도 일치합니다. 예를 들어, |
* | 0회 이상 연속으로 반복되는 앞선 문자에 일치합니다. {0,} 와 동일합니다. 예를 들어, |
+ | 1회 상 연속으로 반복되는 앞선 문자에 일치합니다. 예를 들어, |
? | 0 또는 1회 반복되는 앞선 문자에 일치합니다. {0,1}와 동일합니다.예를 들어, /e?le?/ 는 "angel"의 'el' 에 일치하고, "angle"의 'le' 에 일치하고 또한 "oslo" 의 'l'에도 일치합니다.만약 수량자 *,+,?,{} 바로 뒤에 사용한다면, 기본적으로 탐욕스럽던(가능한 한 많이 일치시키는)와는 반대로 수량자를 탐욕스럽지 않게 만듭니다 (가능한 가장 적은 문자들에 일치시킵니다), 예를 들어, . /\d+/를 "123abc"에 적용시키면 "123"이 일치합니다. 그러나 /\d+?/를 같은 문자열에 적용시키면 오직 "1"만 일치합니다.또한 이 표 시작부분의 x(?=y) 와 x(?!y)에서 설명된것 처럼 사전 검증 에서도 쓰입니다. |
. | (소수점) 다음 줄 문자(개행 문자)를 제외한 어떤 하나의 문자에 일치합니다. 예를 들어, |
(x) | 다음의 예제가 보여주는것 처럼 'x'에 일치하고 일치한 것을 기억합니다. 괄호는 포획 괄호(capturing parentheses)로 불립니다. |
(?:x) | 'x'에 일치하지만 일치한 것을 기억하지 않습니다. 괄호는 비포획 괄호(non-capturing parentheses)라고 불리우고, 정규식 연산자가 같이 동작할 수 있게 하위 표현을 정의할 수 있습니다. 정규식 예제/(?:foo){1,2}/을 생각해보세요. 만약 정규식이 /foo{1,2}/라면, {1,2}는 'foo'의 마지막 'o' 에만 적용됩니다. 비포획 괄호과 같이 쓰인다면, {1,2}는 단어 'foo' 전체에 적용됩니다. |
x(?=y) | 오직 'y'가 뒤따라오는'x'에만 일치합니다. 이것은 lookahead 라고 불립니다. 예를 들어, |
x(?!y) | 오직 'y'가 뒤따라오지 않는 'x'에만 일치합니다. 이것은 negated lookahead 라고 불립니다. 예를 들어, |
x|y | 'x' 또는 'y'에 일치합니다. 예들 들어, |
{n} | 앞 문자가 n 번 나타날 경우에 일치합니다. N은 절대로 양의 정수이어야만 합니다. 예를 들어, /a{2}/는 "candy,"의 'a'에는 일치하지 않지만, "caandy,"의 모든 a 와, "caaandy."의 첫 두 a 에는 일치합니다. |
{n,m} |
예를 들어, |
[xyz] | 문자셋(Character set) 입니다. 이 패턴 타입은 괄호 안의 이스케이프 시퀀스를 포함한 어떤 한 문자에 일치합니다. 점(.) 이나 별표 (*) 같은 특수 문자는 문자셋에서는 특수 문자가 아닙니다. 따라서 이스케이프시킬 필요가 없습니다. 다음의 예제에서 보여주는 것 처럼 , 하이픈을 을 이용하여 문자의 범위를 지정해 줄 수 있습니다.패턴 [abcd] 처럼 일치하는, 패턴 [a-d] 는 "brisket"의 'b' 에 일치하고, "city"의 'c' 에 일치합니다. 패턴 /[a-z.]+/ 와 /[\w.]+/는 "test.i.ng" 전체 문자열이 일치합니다. |
[^xyz] | 음의 문자셋(negated character set) 또는 보수 문자셋(complemented character set)입니다. 괄호 안에 동봉되지 않은 어떤 문자든 일치합니다. 하이픈을 이용하여 문자의 범위를 지정할 수 있습니다. 일반적인 문자셋에서 작동하는 모든것은 여기에서도 작동합니다. 예를 들어, 패턴 |
[\b] | 백스페이스(U+0008)에 일치합니다. 백스페이스 문자에 일치시키려면, 대괄호("[]")를 이용해야만 합니다. (\b와 혼동하지 마세요.) |
\b | 단어의 경계와 일치합니다. 단어의 경계는 단어 문자가 뒤따라오지 않는 위치나, 단어 글자의 앞에서 일치합니다. 단어의 경계는 일치하는 것에 포함되지 않는다는것을 숙지하세요. 다른 말로는, 단어의 경계에 일치하는 것의 길이는 0 입니다. (패턴 예제: |
\B | 단어의 경계가 아닌 곳에 일치합니다. 다시말해, 이 특수문자는 이전 문자와 다음 문자가 같은 타입인 곳에 매치됩니다. 여기서 같은 타입이란 두 문자가 모두 단어이거나, 모두 비 단어(non-word)인 것을 말합니다. 문자열의 시작과 끝은 비 단어로 여겨집니다. 예를 들어, |
\cX | X는 A 에서 Z 까지의 문자중 하나입니다. 문자열에서 컨트롤 문자에 일치합니다. 예를 들어, |
\d | 숫자 문자에 일치합니다. 예를 들어, |
\D | 숫자 문자가 아닌 문자에 일치합니다. 예를 들어, |
\f | 폼피드 (U+000C) 문자에 일치합니다. |
\n | 줄 바꿈 (U+000A) 문자에 일치합니다. |
\r | 캐리지 리턴(U+000D) 문자에 일치합니다. |
\s | 스페이스, 탭, 폼피드, 줄 바꿈 문자등을 포함한 하나의 공백 문자에 일치합니다. 예를 들어, |
\S | 공백 문자가 아닌 하나의 문자에 일치합니다. 예를 들어, |
\t | 탭 (U+0009) 문자에 일치합니다. |
\v | 수직 탭(U+000B) 문자에 일치합니다. |
\w | 밑줄 문자를 포함한 영숫자 문자에 일치합니다. 예를 들어, |
\W | 비 단어 문자에 일치합니다. 예를 들어, |
\n | n이 양의 정수인 곳은, 정규식 안 n번 괄호의 최근 일치 부분의 역참조 입니다. (왼쪽 괄호부터 카운트합니다.) 예를 들어, |
\0 | 널 (U+0000)문자에 일치합니다. 다른 숫자가 따라오지 않게 하세요. 왜냐하면 \0<digits>는 8진 이스케이프 시퀀스이기 때문입니다. |
\xhh | 코드가 hh(두 16진 숫자)인 문자에 일치합니다. |
\uhhhh | 코드가 hhhh(네개의 16진 숫자)인 문자에 일치합니다. |
정규식 내에서, 문자 그대로 취급되어야 하는 사용자 입력을 이스케이프 처리 하는 것은 간단한 재배치로 할 수 있습니다:
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에서 잘 설명되어 있습니다.
| Method | Description |
|---|---|
exec | 일치하는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. |
test | 일치하는 문자열을 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다. |
match | 일치하는 문자열을 찾는 String 메소드입니다. 정보를 가지고 있는 배열을 반환하거나 일치하지 않는 부분을 null로 반환합니다. |
search | 일치하는 문자열을 검사하는 |
replace | 일치하는 문자열을 찾는 String 메소드입니다. 일치하는 문자열을 replacement 로 대체합니다. |
split | 정규표현식 or 고정된 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메서드입니다. |
한 패턴이 어떤 문자열에서 나온 것인지 알고 싶으면, test 나 search 메소드를 사용하는게 좋습니다; 좀더 많은 정보를 원하면 (대신 실행이 느림) exec 나 match 메소드를 사용하는게 좋습니다. 만약 exec 나 match 메소드를 사용했는데 일치하는 부분이 있으면 이 메소드는 배열을 반환하고 정규식 객체에 관련된 properties나 앞서 정의된 정규식 객체인 RegExp properties를 업데이트 합니다. 만약 일치하지 않으면, 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 or index | Description | In this example |
|---|---|---|---|
myArray | The matched string and all remembered substrings. | ["dbbd", "bb"] | |
index | The 0-based index of the match in the input string. | 1 | |
input | The original string. | "cdbbdbsbz" | |
[0] | The last matched characters. | "dbbd" | |
myRe | lastIndex | The index at which to start the next match. (This property is set only if the regular expression uses the g option, described in Advanced Searching With Flags.) | 5 |
source | The text of the pattern. Updated at the time that the regular expression is created, not executed. | "d(b+)d" |
이 예의 두번째 형식처럼, 변수로 지정하지 않고 객체 초기화로 만들어진 정규식을 사용 할수 있습니다. 하지만 만약 그러면 매 어커런스는 새 정규식이 됩니다. 이러한 이유로 만약 변수로 지정하지 않고 이러한 형식을 사용하게 되면, 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를들어, 이러한 스크립트가 있을 수 있습니다.
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"을 출력합니다.
플래그를 사용한 고급검색
정규식은 전반적이고 대소문자를 구분하지 않는 검색을 따르는 네가지 선택적인 표기 방식이 있습니다.
| Flag | Description |
|---|---|
g | Global search. |
| i | Case-insensitive search. |
| m | Multi-line search. |
| y | Perform a "sticky" search that matches starting at the current position in the target string. |
정규식과 플래그를 포함하기 위하여 이 문장을 사용합니다:
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>'C Lang > JS Technic' 카테고리의 다른 글
| generator 객체1 (function *, next(), yield, promise와 yield,co모듈과 yield) (0) | 2018.05.14 |
|---|---|
| Node.jsのexportsについて (0) | 2018.05.13 |
| nodejs의 log모듈 :log4js-node(이 모듈은 뭘까, 이 모듈로 뭐가 가능한거야, 예로 보자 ) (0) | 2018.05.13 |
| nodejs에서 초기설정 파일을 불러오는 방법 : config 모듈 사용하기 (0) | 2018.05.13 |
| var, let, const 차이점 (0) | 2018.05.08 |