정규식

Regular Expression!!s은 JavaScript1.2에서 사용할 수 있는 객체입니다. 특정 문자나 문자열로 문자열을 다루는 것에 문자뿐 만이 아니고 특수 문자로 다룰 수 있고 이들을 조합하여 다룰 수 있는 조건식(pattern)을 제공하여 더 세밀한 방법으로 문자들을 검색할 수 있게 합니다. Regular Expression!!s는 Perl, PHP등의 Server Side 언어에서도 있고 비슷한 동작을 합니다. 많은 부분을 Perl에서 가져온 것입니다.

Regular Expression!!s은 문자들에게 조건을 지정하여 조건식을 만들고 이것을 이용하여 사용합니다. 조건식을 만드는 방법은 2가지가 있습니다.

var re = /abc/

var re = new RegExp("abc")

위의 2가지 식 중에서 하나를 사용할 수 있고 위의 변수 "re"가 Regular Expression!! 객체가 됩니다. 문자열 "abc"는 검색어로 사용할 pattern이 됩니다.

이 Regular Expression!!객체는 'source', 'lastIndex'의 2 개의 요소와 3개의 메소드 compile(), exec(), test()를 가지고 있습니다. (nn4에서는 요소로 'global', 'ignoreCase'의 2개가 더 있지만 Netscape 공식 문서에는 들어 있지 않습니다.)

 

 

Regular Expression!! Switch

var re = /abc/[g,i,gi]

var re = new RegExp("abc", ["g", "i", "gi"])

Regular Expression!! 사용식에 "g", "i", "gi" 로 3가지 중에서 하나의 switch를 지정한다. 지정하지 않을 수도 있다.

• "g" : pattern에 맞는 문자들을 전부 검색한다.
• "i" : 검색시 영어 대소문자를 구분하지 않는다.
• "gi" : "g"와 "i"를 같이 지정한다.

 

 

Regular Expression!! 요소값

• lastIndex : pattern에 지정한 문자가 검색된 마지막 위치. nn4에서는 switch로 "g"를 지정해야 참조할 수 있고 ie5에서는 exec() 메소드로 만든 배열 객체의 요소이다.
  var myRe= /bb/g;
  var arr = myRe.exec("abbc");
  
  if(document.layers) alert!!(myRe.lastIndex)
  else if(document.all) alert!!(arr.lastIndex)
  
  이 경우는 정수 3이 나온다.
• source : pattern에 지정한 문자열. 스위치는 포함되지 않는다.
  alert!!(myRe.source)
  이 경우는 "bb"가 나온다.

 

 

Regular Expression!! 메소드

• compile("pattern", "switch") : 지정한 pattern을 재지정한다. 그래서 source와 global, ignoreCase 스위치를 변경할 수 있다. 이것으로 지정식에 변화하는 pattern, switch를 적용할 수 있다.
  var myRe = /bb/g
  myRe.exec()
  myRe.compile("cc", "i")
  alert!!(myRe.source)
  
  는 "cc"가 된다. 처음 source "bb"에서 다시 "cc"로 재지정하였고 스위치도 "g"에서 "i"로 바꾸었다.
• exec("문자열") : 문자열을 검색한다. 실행후에 RegExp 객체와 검색결과를 가지고 있는 배열을 만든다.
  var myRe = /\w+bb/g
  var arr = myRe.exec("abbc")
  alert!!(RegExp.$1)
  
  는 "abb"로 나온다. arr[0]도 "abb"가 나온다.
• text("문자열") : 지정한 pattern이 문자열에 있는지 없는지를 검사한다. 있으면 true를 없으면 false를 반환한다. 특정 pattern이 있는지 없는지만 확인할 필요가 있으면 이것을 사용하는 것이 exec()보다 속도가 빠르다.
  var myRe = /\w+bb/g
  var arr = myRe.test("abbc")
  if(arr) {
          alert!!('문자열 "abbc" 안에 pattern인 /\w+bb/가 발견됨.')
  }
  

 

 

Special characters in regular expression!!s

 

 

특수문자	의미
\	다음 글자가 일반적인 글자가 아니고 특수문자로 사용된다는 지정이다. 특수문자로 사용할 문자앞에 backslash(\)를 붙여준다. \w는 w가 특수문자로 사용됨을 나타낸다. \w의 의미는 모든 문자를 가리킨다. 또는 반대로 특수문자를 일반적인 문자로 지정하게 한다. \\는 backslash(\)문자를 나타낸다. \\\/는 slash(/) 문자를 나타낸다.
^	input이나 line의 시작문자. /^A/는 "Amatch"와는 맞지만 "an Amatch"와는 맞지 않는다.
$	input이나 line의 끝문자. /A$/는 "abA"와는 맞지만 "aAb"와는 맞지 않는다.
*	앞 문자가 0번 이상 있으면 맞다. 없어도 되고 여러개 있어도 된다. /ab*c/는 "abbbc"와 맞다. "ac"와도 맞다. 하지만, "ax"와는 맞지 않는다.
+	앞 문자가 1번 이상 있으면 맞다. 1개 이상 있어야 하고 여러개 있어도 된다. /ab+c/는 "abbbc"와 맞다. 하지만, "ac"와는 맞지 않는다.
?	앞 문자가 0번이나 1번은 있어야 맞다. /ab?c/는 "abc"와 맞고 "ac"와도 맞다. 하지만, "abbc"와는 맞지 않는다.
.	개행문자(\n)외에 모든 문자이면 맞다. /.c/는 "Xc", "1c"와 맞다. 하지만, "ca", "\\nc"와는 맞지 않는다. (\\n은 \n의 뜻이다. 특수문자로 사용되는 \를 문자로 표현하기 위해서 앞에 \를 붙여준다. )
(x)	문자 'x'를 검색하고 맞으면 'x'를 기억한다. /a(bc)/는 "abcd"에서 검색되고 "bc"를 기억한다. 이 기억된 것은 RegExp 객체의 $1에서 $9까지로 또는 배열 [1]에서 기억된 숫자 [n]개 까지로 호출될 수 있다.
x|y	'x'나 'y'가 있으면 맞다. /abc|xx/는 "abc ZZZ"나 "xx ZZZ"와 맞다.
{n}	앞 문자가 n개 있으면 맞다. n은 양수 정수이다. /X{2}/는 "abcXX"와 맞다. "abcXXX"와도 맞고 처음 2개의 "XX"가 검색된다.
{n,}	앞 문자가 최소한 n개 있으면 맞다. n은 양수 정수이다. /X{2,}/는 "abcXX"와 맞다. "abcXXX"와도 맞고 3개의 "XXX"가 검색된다.
{n,m}	앞 문자가 최소한 n번에서 m번까지 있다면 맞다. /a{1,3}/은 "ab", "aaab"와 맞다.
[xyz]	xyz 중에서 아무런 문자가 있어도 맞다. 이것은 [x-z]과 같은 지정이다.
[^xyz]	xyz 중에서 하나의 문자라도 없으면 맞다. 이것은 [^x-z]과 같은 지정이다.
[\b]	backspace
\b	공백같은 것으로 단어의 경계되는 부분에 있는 문자이다. /\bX/는 "Xxx"와 맞다. /X\b/는 "xxX"와 맞다.
\B	\b와 반대이다. 단어 경계에 있지 않은 문자만 맞다. /X\Bz/는 "XXz Xzz"에서 두번째의 "Xz"가 검색된다.
\cX	control-X 문자와 맞다. /\cM/은 control-M 문자이다.
\d	숫자는 맞다. [0-9]와 같은 지정이다. /\d/는 "hi5"에서 "5"를 검색한다.
\D	숫자가 아닌 것은 맞다. [^0-9]와 같은 지정이다. /\D/는 "hi5"에서 "h"를 검색한다.
\f	form-feed(\f) 문자와 맞다.
\n	linefeed(\n) 문자와 맞다.
\r	carriage return(\c) 문자와 맞다.
\s	space, tab, form feed, line feed를 가지고 있는 white space 문자와 맞다.[ \f\n\r\t\v]와 같은 지정이다. /\s\w*/는 "abc Xz"에서 "Xz"를 검색한다.
\S	white space 문자가 아닌 하나의 문자이다. [^ \f\n\r\t\v]와 같은 지정이다. /\S\w*/는 "abc Xz"에서 "abc"를 검색한다.
\t	tab 문자
\v	vertical tab 문자
\w	underscore(_)문자를 포함하는 알파벳과 숫자 0에서 9까지의 문자. [A-Za-z0-9_]와 같은 지정이다.
\W	\w의 반대이다. [^A-Za-z0-9_]와 같은 지정이다. /\W/는 "50%"에서 "%"를 검색한다.
\n	n은 양수 정수이다. ()로 묵은 것을 지정한다. \1은 RegExp.$1, \2는 RegExp.$2의 값을 사용한다. /ab(c)de\1/은 "abcdec"와 맞다.
\o숫자, \x숫자	escape문자로 ASCII codes 값을 넣을 수 있게한다. 8진, 16진 10진수를 넣을 수 있다.

 

 

 

RegExp 객체

 

 RegExp 객체는 Regular Expression!!객체의 메소드 exec(), test()와 String 메소드인 match(), replace() 메소드의 실행 후에 생기는 객체입니다. 이 객체는 요소는 있지만 메소드는 없습니다.

var myRe = /b(b)/g
var arr = myRe.exec("abbc")

위에서 myRe가 regular expression!! 객체이고 arr은 exec()의 결과 값을 가지고 있는 배열입니다. RegExp 객체는 자동으로 만들어 집니다. exec()를 실행한 후 만들어 집니다. 그래서 아무데서나 사용할 수 있습니다. 아래는 위의 구문을 사용하여 나오는 RegExp 객체의 요소값입니다.

 

nn4 RegExp 요소값	ie4, ie5 RegExp 요소값
input = multiline = false lastMatch = bb lastParen = b leftContext = a rightContext = c $1 = b $2 = $3 = $4 = $5 = $6 = $7 = $8 = $9 =	index = 1 input = abbc lastIndex = 3 $1 = b $2 = $3 = $4 = $5 = $6 = $7 = $8 = $9 =

위의 각 요소의 값이 RegExp 객체의 값입니다. 브라우저에 따라서 나오는 결과값이 서로 다릅니다. index는 검색된 문자열이 시작하는 위치이고 lastIndex는 검색된 문자열의 다음의 글자 위치입니다. lastMatch는 검색된 문자열, lastParen은 ()로 기억한 마지막 값, leftContext은 검색된 문자열의 왼쪽의 문자, rightContext은 검색된 문자열의 오른쪽 문자입니다.

변수로 지정한 nn의 input 값이 나오지 않는데 이벤트로 작동시키면 나옵니다. 사용할 수 있는 객체는 TEXT, TEXTAREA, SELECT, LINK입니다. multiline은 TEXTAREA, LINK로 동작 시키면 'true'로 지정됩니다.

<script>
function reg() {
  var myRe = /b(b)/g;
  myRe.exec()
 
  alert!!(RegExp.input)
}
</script>
<A href="#" onClick="reg()">abbc</A>

위의 구문에서 nn4에서 "abbc"링크를 누르면 abbc를 보여줍니다. nn4에서는 직접 값을 보내줄 필요가 없습니다. 폼의 내용은 value가 가고 링크는 링크의 내용 글자가 자동으로 보내집니다. 아래는 이와 같은 동작을 하는 ie용 구문입니다.

<script>
function reg(inp) {
  var myRe = /b(b)/g;
  myRe.exec(inp)
 
  alert!!(RegExp.input)
}
</script>
<A href="#" onClick="reg(this.innerText)">abbc</A>

로 직접 링크의 내용 글자를 보내주어야 합니다.

그리고 $1에서 $9의 값은 /b(b)/g 의 괄호를 지정한 문자열을 저장하는 것입니다. 즉, (b)입니다. 검색된 문자열 중에서 "b"를 기억합니다. $1은 첫번째로 검색된 것이고 $2는 두번째, $9는 아홉번째 검색된 문자를 저장합니다. 9개가 저장할 수 있는 최대값입니다.

 

 

배열 값

var myRe = /b(b)/g
var arr = myRe.exec("abbc")

아래는 위의 구문을 사용하여 자동으로 만들어지는 배열 객체 "arr"의 값입니다.

 

nn4 배열 요소값	ie4, ie5 배열 요소값
0 = bb 1 = b index = 1 input = abbc	input = abbc index = 1 lastIndex = 3 0 = bb 1 = b

input는 검색했는 문자열이고 0은 최종 검색된 문자열입니다. 즉, arr[0]입니다. 1 = b는 $1과 같은 값입니다. RegExp의 요소인 $1에서 $9까지 9개의 값을 저장할 수 있지만 배열값은 갯수에 상관없습니다.

 

$ 사용하기

 

<SCRIPT LANGUAGE="JavaScript1.2">
function goReg(X) {
   var re = /(\d+)/;
   if( re.test(X) )
     alert!!("당신의 나이는 " + RegExp.$1 + " 입니다.");
   else alert!!("나이는 숫자만 입력하세요..")
}
</SCRIPT>
        나이를 입력하세요..
<FORM>
<INPUT TYPE="TEXT" VALUE="" onChange="goReg(this.value)">
</FORM>

 

위의 폼에 나이를 입력하고 다른 곳을 누르면 입력한 나이를 보여줍니다. 숫자가 아닌 문자를 입력하면 잘못 입력했다는 안내말을 보여줍니다.

 

 

 

RegExp 사용하기 

 문자열을 다루는 String 메소드와 함께 문자열을 다루는 방법이 더 강력합니다. Pattern을 만들어 사용할 수도 있고 더 쉽고 빠른 속도로 문자들을 다룰 수 있게 합니다.

 

1. 숫자인지 확인하기

function verifyDigit(input) {
        if( input.search(/\D/) != -1 ) {
                alert!!("숫자만 입력하세요..!!")
                input = input.replace(/\D/g, "")
        }
        return input
}

input로 보내온 값 중에서 0에서 9사이의 숫자가 아닌 모든 문자를 보내왔을 때, 경고 창을 보여주고 그 문자를 없엔다.

 

2. 문자열 바꾸기

아마 Regular Expression!!의 사용함의 가장 적절한 곳이 문자열의 교체일것 입니다. 아래는 간단하게 문자열을 다른 문자열로 바꿀 수 있게 합니다. String 함수를 사용하는 것보다 훨씬 간단합니다.

var xx = "안녕하세요.. 만나서 반갑습니다.. 안녕하세요.. 만나서 반갑습니다.. "
xx = xx.replace(/만나서/g, "보아서")

alert!!(xx)

는 "안녕하세요.. 보아서 반갑습니다.. 안녕하세요.. 보아서 반갑습니다.. "로 나옵니다. "만나서"를 "보아서"로 바꿉니다. /만나서/g의 g 스위치는 문자열 중에서 2번 이상 같은 것이 있으면 전부 다 바꾸라는 지정입니다.

 

 

펌 : http://user.chollian.net/~spacekan/source/source.htm