자료/Javascript

정규표현식 with Javascript(자바스크립트)

네오블루 2009. 5. 31. 21:09

What is Regular Expression

정규표현식이란 어떤 문자열의 특정 케릭터 조합을 일정한 패턴으로 표현하는것이라고 할 수 있다.

즉, 어느 문자열에서 특정 패턴을 가지는 문자들을 찾아내는것이다. 이러한 특징 때문에 대부분 정규표현식은

 

1. 특정 변수가 가지는 일정한 패턴이 원하는 패턴과 일치하는지 확인할 때

2. 특정 변수에 들어있는 문자열에서 자신이 원하는 패턴의 특정 문자를 찾아낼때

 

사용된다. 또한 본 글에서는 with Javascript라 명시했지만 이는 Javascript뿐만이 아니라 곳곳에서 사용되는 일종의 규약임을

인식하기를 바란다.(즉, Javascrip 뿐이 아니라 정규표현식을 지원하는 것이라면 어디서든 비슷하게 사용된다. 크게 차이는 없음)

 

자바스크립트에서 정규표현식은 1.2 버젼부터 사용이 가능한 관계로 오래된 브라우저의 사용자는 이를 사용 할 수 없다.

또한 자바스크립트에서 정규표현식은 하나의객체이다.

Define Regular Expression

자바스크립트에서의 정규표현식은 객체이기 때문에 기본적으로 constructor function형태로 사용이 가능할 뿐만이 아니라 object initializers또한 지원한다.

 

  constructor function 형식 : re = new RegExp("[a-z]");

  object initializers 형식 : re = /[a-z]/;

Use Regular Expression

정규 표현식에 사용되는 형태, 문자는 다음과 같다.

Character

의미

\

\ 다음에 나오는 특수 문자를 문자열로 인식
가령, /라는 특수문자는 일반적으로 프로그램상에서 나누기로 인식하게 되어있습니다. 이것을 나누기가 아닌 그냥 문자열 / 로 인식시키려면 \/ 로 써주면됩니다.

^

 라인의 처음과 패턴과 매치
가령, ^A 라고 써주면 검색하고자 하는 문장의 시작문자가 A인지를 검사하는 것입니다.

$

 라인의 끝과 패턴과 매치
가령, ^A 라고 써주면 검색하고자 하는 문장의 마지막문자가 A인지를 검사하는 것입니다.

*

0개 이상의 문자와 매치(모든것이라는 의미)

+

1개 이상의 문자와 매치, {1,}와 같은 의미임.

?

0 또는 1개의 문자 의미.
즉, A?b 라면 A라는 문자와 b라는 문자사이에 문자가 0개 또는 1개 가 들어갈 수 있다는 말입니다. 즉, Ab, Aab, Acb등과 같은..

.

1개의 문자와 일치

()

한번 match를 수행해서 나온 결과를 기억함.
예: /(foo)/ 는 foo라는 단어를 검색한 후, 그 단어를 배열등과 같은 저장장소에 남겨두어 나중에 다시 호출할 수 있도록 합니다.

|

OR

{n}

정확히 n개의 문자
예: a{2} 는 a 문자 두 개, 즉, aa를 의미합니다.

{n,}

n개 이상의 문자

{n,m}

n이상 m이하의 문자

[xyz]

문자들의 set를 의미. 가령, [a-z]라면 a부터 z까지의 모든 문자와 매치하는 것으로 []안의 -는 범위를 나타냅니다.

[^xyz]

네가티브(-) 캐릭터 셋

[\b]

백스페이스와 매치

\b

단어의 시작 또는 끝에서 빈 문자열과 매치

\B

단어의 시작 또는 끝이 아닌 곳에서의 빈 문자열과 매치

\cX

control 문자와 매치

\d

0부터 9까지의 아라비아 숫자와 매치. [0-9]과 같은 의미

\f

form-feed와 매치

\n

linefeed와 매치

\r

캐리지 리턴과 매치

\s

화이트스페이스 문자와 매치. [ \t\n\r\f\v]과 같은 의미

\S

\s가 아닌 문자들과 매치. [^ \t\n\r\f\v]과 같은 의미

\t

탭 의미

\v

수직 탭 의미

\w

w는 문자와 숫자를 의미 =[a-zA-Z_0-9]

\W

W는 문자가 아닌 요소, 즉 % 등과 같은 특수 문자를 의미함 =[^a-zA-Z_0-9]

\n

n은 마지막 일치하는 문장

\ooctal
\xhex

8(octal)진수, 10(hex)진수 값

Regular expression(정규 표현식)과 함께 사용하는 함수들

exec

문장에서 매치를 위해 검색을 수행하는 정규 표현식 메소드
배열을 리턴

test

문장에서 매치를 위해 테스트하는 정규표현식 메소드
True 또는 False 리턴

match

문장에서 매치를 위해 검색을 수행하는 string 메소드
배열 또는 null 문자 리턴

search

문장에서 매치를 위해 테스트하는 string 메소드
목차나 -1 리턴

replace

문장에서 매치를 위해 검색을 실행하고 문장을 대체하는 String 메소드

split

문장에서 매치하는 부분을 배열에 할당하는 String 메소드

 

 

Sample of Ragular Expression

이는 가장 단순한 형태의 정규표현식으로 쉽게 설명하기 위해 만든것으로 실제로 사용할 수도 있지만 현실에 잘 맞지 않을 수도 있음을 염두하길 바란다.

 

 YYYY-MM-DD 형태의 날짜 판별 스크립트.

<SCRIPT LANGUAGE="JavaScript">
<!--

function validateDate(){

  if(frm.birthday.value.search(/[12][0-9]{3}-[0-9]{2}-[0-9]{2}/) == -1){
        document.getElementById("birthdayDIV").style.display="block";
        isValidate = false;
    }
    else {
        document.getElementById("birthdayDIV").style.display="none";
    }

}

//-->

이메일 판별용 스크립트.

<SCRIPT LANGUAGE="JavaScript">

function validateEmail(){

   if(frm.email1.value.search(/(\S+)\@(\S+)\.(\S+)/) == -1){
         document.getElementById("emailDIV").style.display="block";
         isValidate = false;
    }
    else {
        document.getElementById("emailDIV").style.display="none";
    }

}

//-->

 

 

if(frm.birthday.value.search(/[12][0-9]{3}-[0-9]{2}-[0-9]{2}/) == -1){

위의 날짜 판별용 스크립트에는 () 를 찾아볼 수가 없다. 즉 이를 나중에 다시 불러 쓸 수 없다.

하나하나 뜯어 살펴보도록 하자.

 

[12] : 1 혹은 2 둘중 하나

[0-9] : 0 1 2 3 4 5 6 7 8 9 중 하나

{3} : [0-9] 를 3번 반복

 

즉 여기까지 1000 부터 2999 까지의 숫자를 의미한다.

- 는 그냥 문자 -를 의미한다.

 

[0-9], {2} : 0~9까지의 숫자를 두번 즉, 00부터 99까지.

 

전부 표현하자면 1000-00-00 부터 2999-99-99까지 표현이 가능하게 되어있다.

if(frm.email1.value.search(/(\S+)\@(\S+)\.(\S+)/) == -1){

이는 각각이 ()로 묶여 있어 이후에 따로 불러서 사용 할 수 있다.

 

(\S+) : 한개이상 문자열. 이후 $1 로 불러올 수 있다.

\@ : @ 문자 표현

(WS+) : 한개이상 문자열. 이후 $2 로 불러올 수 있다.

\. : . 문자 표현

(WS+) : 한개이상 문자열. 이후 $3 로 불러올 수 있다.

 

즉qkfl2@korea.com을 받았을 경우

 

alert("이메일은 "+ RegExp.$1 + "@" + RegExp.$2 + "." + RegExp.$3 + "입니다.");

 

로 불러올 수 있다.

 

 

* 갱신 내용 : /w 에 대한 잘못 된 정보. (죄송합니다. 긁어서 확인을 못했네요) 2007/10/9

작성자 : 백병민 (http://blog.naver.com/qkfl4)

마지막 갱신일 : 2007년 10월 9일