BLOG ARTICLE Javascript 궁금하니? | 25 ARTICLE FOUND

2010.01.15 collection 과 nodelist 차이
2009.12.01 Intro to JavaScript Events
2009.11.30 정규표현식 #002
2009.11.30 정규표현식 #001
2009.11.20 navigationMode opera
2009.11.10 정규식 기초
2009.11.10 정규 표현식
2009.11.10 구글크롬 테스트 및 브라우저버전체크 스크립트
2009.11.10 정규식(Regular Expression) 표현 방법 및 예제
2009.10.14 JavaScript의 이런 점이 뒤통수를 때리더라.

collection 과 nodelist 차이

Javascript 궁금하니? 2010. 1. 15. 17:20

출처: http://2proo.net/entry/JavaScript-TIP-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-collection-%EA%B4%80%EB%A0%A8-TIP

http://blog.naver.com/mama8181?Redirect=Log&logNo=19736411

collection 은 일반적인 집합 개념으로 사용한다.
즉, 배열 같은 개념이고, nodelist도 collection의 일부로 볼 수 있나 보다~

///////////////////////////////////////////////////////////////////////

<JavaScript TIP> 자바스크립트 collection 관련 TIP

① 배열의 이용

데이타의 개수나 사이즈가 변동하는 경우에만 Collection계통의 클라스를 사용하며, 그외에는 배열을 사용합니다.

② J2SE1.2이상에서의 Collection이용

JDK1.1까지는 Vector클래스나 Hashtable클래스가 편리했으나, 이러한 클래스는 메소드가 동기화(synchronized)

되어 있습니다. 따라서 동기화가 필요없는 경우에는 비효율적입니다.

J2SE1.2이상에서는 메소드가 동기화되어있지 않은 ArrayList클라스나 HashMap클래스를 이용합니다.

Vector클래스는 ArrayList로 Hashtable은 HashMap클래스로 바꿔이용합니다.

예) 구 Collection클래스 이용예

Vector vector = new Vector();

Hashtable table = new Hashtable();

예) J2SE1.2이상 Collection클래스 이용예

List list = new ArrayList();

Map map = new HashMap();

또한, J2SE1.2이상에서 Collection의 동기화가 필요한 경우에는

List list = Collection.synchronizedList(new ArrayList(..));

위와 같이 사용합니다.

③ Collection size 초기화

Collection을 default 사이즈로 만들면, 필요시 자동적으로 사이즈가 확장되나 명확히 예측이 가능한 경우에는 사이즈를 초기화 하는 편이 훨씬 효율적입니다.

예) 사이즈를 지정하지 않고 Collection을 생성한 코드예

List list = new ArrayList();

HashMap map = new HashMap();

예) 사이즈를 지정한 Collection 생성 코드예

List list = new ArrayList(num);

HashMap map = new HashMap(num);

④ Iterator클래스보다 빠른 요소검사

Collection 사이즈를 명확히 알 경우에는 Iterator클래스의 next()와 비교하여,

Iterator클래스의 hasNext()에 의한 요소종료 체크가 필요없으며 내부처리가 간단한 List클래스의 get()메소드를
추천합니다.

예) Iterator클래스의 next()에 의한 요소조사

Iterator iterator = array.iterator();

while (iterator.hasNext())

{

Object object = iterator.next();

}

예) List클래스의 get()에 의한 요소조사

int size =array.size();

for (int i=0; i<size ; i++)

{

Object object = array.get(i);

}

⑤ 요소삽입/삭제시 주의점

List도중에 요소를 추가/삭제할 경우에 내부적으로 배열의 copy가 행해집니다.

따라서 요소의 수가 많으면 많을 수록 copy하는 요소수도 많아져 결과적으로 performance의 저하를 초래합니다.

내부적처리 로써 [ (전체사이즈) - (삽입/삭제대상요소의 index)] 만큼의 요소가 copy되므로 아래의 예를 참조바랍니다.

예) List의 맨앞에 요소를 추가/삭제하는 경우 -- 속도가 느림.

list.add(0, new Object());

list.remove(0);

예) List의 맨 뒤에 요소를 추가/삭제하는 경우 -- 속도가 빠름.

list.add(new Object());

list.remove(list.size() - 1);

⑥ List요소 전체삭제

List요소를 전체삭제 할때, 통상 쓰는 clear()을 이용하지말고, 새롭게 List를 생성(초기화)하는 편이 효율적입니다.
왜냐하면, clear()는 내부적으로 보유하고 있는 배열의 전체요소에 null을 셋팅함으로써 전체삭제를 실현하기
때문입니다.

예) clear()에 의한 요소 전체삭제

List list = new ArrayList();

for(int i=0; i< num; i++) {

list.add(new Integer(i));

}

list.clear();

예) List재작성에 의한 요소 전체삭제

List list = new ArrayList();

for(int i=0; i< num; i++) {

list.add(new Integer(i));

}

list = new ArrayList();

⑦ 배열요소 copy방법

루프를 돌며 배열요소를 하나씩 copy할 경우에는 System.arraycopy(Object src,int srcPos,Object dest,int destPos,int length)를 이용합니다. 메소드의 인자는 아래와 같습니다.

src - the source array.

srcPos - starting position in the source array.

dest - the destination array.

destPos - starting position in the destination data.

length - the number of array elements to be copied.

예) 루프를 돌며 배열소소를 copy하는 예

int[] buf = new int[num];

int[] copy = new int[num];

for (int i=0; i<num; i++)

{

copy[i] = buf[i];

}

예) System.arraycopy()에 의한 신속한 copy 예

int[] buf = new int[num];

int[] copy = new int[num];

System.arraycopy(buf,0, copy,0, num);

⑧ List에 보존되어 있는 object 요소를 배열에 넣는 방법

List클래스의 toArray()를 이용하여 List에 보존되어 있는 Object요소를 배열에 넣습니다.

예) 루프에 의한 object요소 copy 예

int size = list.size();

Integer[] result = new Integer[size];

for (int i=0; i<size; i++)

{

result[i] = (Integer) list.get(i);

}

예) toArray()에 의한 신속한 copy

int size = list.size();

Integer[] result = new Integer[size];

list.toArray(result);

AND

Intro to JavaScript Events

Javascript 궁금하니? 2009. 12. 1. 17:35

출처: http://www.permadi.com/tutorial/jsEventBubbling/index.html

Background

The term event refers to something that happens to elements (by elements, we mean html elements such as <table>, <form>, <button>, or <div> ). For example, when clicking a <button>, there are several events taking place: mouse button being pushed, mouse button being released, and a html button being clicked.

Events are sent as notifications to JavaScript. When event occurs, they are being fired. JavaScript can intercept events by overridding the event handlers.

For example, to catch onclick events on this button:

Then one way to do it is like below (this particular example, when we intercept the event, we show an alert box saying "button clicked"):

Events can also be intercepted to trigger a function call. For example, below, the same onclick event triggers the handleOnClick function which we created somewhere else on the html page.

<script language="javascript">
  function handleOnClick()
  {
    alert(this);    
  }
</script>

[other html ....]

<input onclick="handleOnClick" type="button" value="Button"/>

The other two events can be intercepted, too. For example, the button below intercepts onmousedown, onmouseup, and onclick:

Notice that there are a sequence of order of the events: onmousedown, onmouseup, then onclick. The order could be important on some programming purposes.

Default Event Handler And Return Value

By assigning an event handler like above, our handler will be called before the default (built-in) event handler is called. Ont thing that often gets overlooked is the return value. This value is important in some sitations because that value determines whether the default event handler is called or not.

Returning false tells the default event handler to be skipped. Returning true tells the event-chain to continue (meaning the default event handler will be called). If no return value is specified, true is assumed.

To see the effect, see this example. The first text-field returns true and the second one returns false. Notice that by returning false, the default event handler is not called, and thus you cannot type onto the second text-field (this is useful for form validation, for example if user typed an alphabet into a phone number, you can reject it right away by returning false).

<input onkeydown="javascript:return true;" type="text" name="textfield" />
<input onkeydown="javascript:return false;" type="text" name="textfield" />

This return value may be useful (for example during in form validation, if the user's input is valid, we can just return true to let the default event handler take over).

Another frequent technique is to assign a script to a link without returning anything like the first example below. Click the two links below and see how they behave differently.

<a class="contentlink" href="#" 
  onclick="javascript:alert('do something');">

<a class="contentlink" href="#" 
  onclick="javascript:alert('do something');return false;">

Click here to execute a JavaScript function and retuning nothing (true)

Click here to execute a JavaScript function and retuning false

On the first link, the default handler is called. Since nothing is returned. The default handler tries to jump to the anchor, which cause the anchor (#) to be appended in the browser bar (and possibly the html page to be scrolled to the top).

The second one does not do that because we return false to stop the default handler. In most cases, the later is what we really want so it is a good idea to pay attention to this return value.

Event Capturing And Bubbling

There are three phases that every event travels in the event chain: capturing phase, target phase and bubbling phase. Event capturing phase is when event is being sent from the container all the way down to the target element. Event bubbling refers to the way events are propagated upward to its ancestors after it reaches its target element. Target phase is when the event actually is being sent to the target element that originated the event.

Consider the button below, contained within a <form> contained within <body>.

The capturing phase goes the root element, all the way to <button>.

When it reaches the button, that is the target phase. The bubbling phase goes in the opposite direction. After the event reaches the target (buttton), it goes back all the way to the top ancestor.

All the major current browsers supports the bubbling phase model, but some do not support the capturing phase. We will discuss event capturing more when discussing addEventListener() below.

to demonstrates event bubbling, we assign an onclick for every element in the following example. Click the button and you will see the event propagates up to its parents. Even though you only clicked the button, its ancestors also receive the event:

<body onclick="javascript:alert('body clicked');">
  <form onclick="javascript:alert('form clicked');">
    <input onclick="javascript:alert('button clicked');" name="Button" type="button">
  </form>
</body>

Open this page and click the button to try. You will see alert boxes in the order of the event received: the "button clicked" message, then "form clicked," then "body clicked."

This can be useful as we see in the example later, but it can also be undesirable to keep the bubbling on some situations. There's a way to break the bubbling-chain by setting the cancelBubble property of the event object to false.

event.cancelBubble=false;

Modifying our example and setting cancelBubble to false in the button:

<body onclick="javascript:alert('body clicked');">
  <form onclick="javascript:alert('form clicked');">
    <input onclick="javascript:alert('button clicked');event.cancelBubble=false;" 
       name="Button" type="button">
  </form>
</body>

Open this page and click the button to see how the event stops propagating and no longer triggers the parent event handlers.

For completeness, we're going back to capturing phase. The recommended method of event handling by DOM3 standard is to use addEventListener() method.

addEventListener(event string, 
   listener (function or an Object implementing EventListener),
   useCapture);

Where useCapture is a boolean value that indicates that the event of the specified type (example: "click" event) to be sent to the designated listener by the designated element during the capture phase (refer to the diagram above). Son that in this example below, the body will receive the notification before the event reaches the button:

document.body.addEventListener("click", function(){alert("body clicked");}, true);
document.getElementById("button").onclick=function(){alert("button2 clicked");

Try it here.

If the useCapture event above is set to false, then the event will be sent to the listener during the bubbling-phase, which means button will fire first before body.

The bad news is addEventListener() is currently not supported in Internet Explorer 7. In IE, you need to use this instead (which lacks the last parameter):

attachEvent(event string, 
   listener (function));

I won't discuss this further But see an intersting effect of the useCapture parameter here (assuming you use Firefox 2 which supports addEventListener()):

<script language="javascript">
if (document.body.addEventListener)
{
  document.body.addEventListener("click", 
    function(){alert("body clicked");}, true);
  document.getElementById("form").addEventListener("click", 
    function(){alert("form clicked");}, true);
  document.getElementById("button").addEventListener("click", 
    function(){alert("button clicked");}, true);
}
</script>

Try the example.

<script language="javascript">
  document.body.addEventListener("click", 
    function(){alert("body clicked");}, false);
  document.getElementById("form").addEventListener("click", 
    function(){alert("form clicked");}, false);
  document.getElementById("button").addEventListener("click", 
    function(){alert("button clicked");}, false);
</script>

Try the example .

In the first example, the event are received in the following order: body, form, then button. In the second example, they are in opposite order: button, form, body. Do you see why this is from examining the direction of the captuing and bubbling phase?

AND

정규표현식 #002

Javascript 궁금하니? 2009. 11. 30. 14:12

출처: http://nomasumer.egloos.com/9328413

자바스크립트 정규표현식(JavaScript Regular Expression)

정규 표현식(Regular Expression) 이란?

문자열에서 특정한 캐릭터 조합(character combination)을 찾아내기위한 패턴(pattern)입니다.
특정 문자나 문자열로 문자열을 다루는 것에 문자뿐 만이 아니고 특수 문자로 다룰 수 있고 이들을 조합하여 다룰 수 있는 조건식(pattern)을 제공하여 더 세밀한 방법으로 문자들을 검색할 수 있게 합니다.

정규 표현식(Regular Expression) 생성 방법
1. object initializers를 사용한 방법
정규표현 =/패턴설정/[i/g/gi]	var re = /ab+c/i
2. RegExp 객체의 constructor function를 사용한 방법
new RegExp("패턴 설정"[, "i", \| ,"g", \| "gi"])	var re = new RegExp("ab+c", "i")

정규 표현식(Regular Expression) 플래그 구성 요소(생략 가능)
g	완전일치(발생할 모든 pattern에 대한 전역 검색)
i	대/소문자 무시
gi	대/소문자 무시하고 완전 일치

정규 표현식(Regular Expression) 과 함께 사용하는 함수들
Method	Type	설명
exec()	RegExp	문장에서 매치를 위해 검색을 수행하는 정규 표현식 메소드 배열을 리턴 지정된 패턴과 같은 패턴을 찾는다.
test()	RegExp	문장에서 매치를 위해 테스트하는 정규표현식 메소드 True 또는 False 리턴 같은 패턴이 있는지 테스트 한다.
match()	String	문장에서 매치를 위해 검색을 수행하는 string 메소드 배열 또는 null 문자 리턴 지정된 패턴과 동일한 패턴을 찾는다.
search()	String	문장에서 매치를 위해 테스트하는 string 메소드 목차나 -1 리턴 첫번째로 일치하는 부분 문자열의 위치를 반환합니다
replace()	String	문장에서 매치를 위해 검색을 실행 문장을 대체하는 String 메소드 지정된 패턴과 바꾼다.
split()	String	문장에서 매치하는 부분을 배열에 할당하는 String 메소드 지정된 패턴부분에서 문자열을 나눈다.

정규 표현식에서 사용하는 특수문자
문자	설명
	다음에 나오는 특수 문자를 문자열로 인식 예 : \' 시퀀스는 ""를 찾고 '/'는 "/"를 찾습니다.
^	입력 문자열의 시작 위치를 찾습니다.(라인의 처음과 패턴과 찾습니다.) 가령, ^A 라고 써주면 검색하고자 하는 문장의 시작문자가 A인지를 검사하는 것입니다.
$	입력 문자열의 끝 위치를 찾습니다.(라인의 끝과 패턴과 찾습니다.) 가령, $A 라고 써주면 검색하고자 하는 문장의 마지막문자가 A인지를 검사하는 것입니다.
*	0개 이상의 문자와 찾습니다.( 모든것이라는 의미 ==> {0,} 같은 의미 ) 예 : "cg*"는 "c", "cginjs" 등입니다.
+	1개 이상의 문자와 찾습니다.( {1,} 같은 의미임. ) 예 : "cg+"는 "cg", "cginjs" 등이지만 "c"는 아닙니다.
?	0 또는 1개의 문자 의미.( {0,1} 같은 의미임. ) 예 : " C?j" 라면 C라는 문자와 j라는 문자사이에 문자가 0개 또는 1개 가 들어갈 수 있다는 말입니다. Cj, Cnj, Cgj등과 같은..
.	"n"을 제외한 모든 단일 문자를 찾습니다. "n"을 포함한 모든 문자를 찾으려면 '[.n]' 패턴을 사용하십시오.
()	한번 match를 수행해서 나온 결과를 기억함. 예 : /(cnj)/ 는 cnj라는 단어를 검색한 후, 그 단어를 배열등과 같은 저장장소에 남겨두어 나중에 다시 호출할 수 있도록 합니다.
\|	OR
{n}	정확히 n개의 문자(n은 음이 아닌 정수) 예: a{2} 는 a 문자 두 개, 즉, aa를 의미합니다.
{n,}	n정확히 n개 찾습니다.(n,음이 아닌 정수) 예 : "c{2}"는 "cnj"의 "c"는 찾지 않지만 "bcccccccccf"의 모든 c는 찾습니다.
{n,m}	최소 n개, 최대 m개 찾습니다.(n은 음이 아닌 정수) 예 : "b{1,4}"은 "bcccccccccf"의 처음 네 개의 c를 찾습니다. 쉼표와 숫자 사이에는 공백을 넣을 수 없습니다.
[xyz]	괄호 안의 문자 중 하나를 찾습니다.(문자들의 set를 의미) 가령, [a-z]라면 a부터 z까지의 모든 문자와 찾습니다.하는 것으로 []안의 -는 범위를 나타냅니다. 괄호 안의 문자 중 하나를 찾습니다. 예:, "[abc]"는 "cnj"의 "c"를 찾습니다.
[^xyz]	제외 문자 집합입니다.(네가티브(-) 캐릭터 셋) 괄호 밖의 문자 중 하나를 찾습니다. 예 : "[^abc]"는 "acn"의 "n"를 찾습니다.
x\|y	x 또는 y를 찾습니다. 예 : "c\|cginjs"는 "c" 또는 "cginjs"를 찾습니다.
[a-z]	문자 범위입니다.(지정한 범위 안의 문자를 찾습니다) 예 : "[a-z]"는 "a"부터 "z" 사이의 모든 소문자를 찾습니다.
[^a-z]	제외 문자 범위입니다(지정된 범위 밖의 문자를 찾습니다) 예 : "[^a-z]"는 "a"부터 "z" 사이에 없는 모든 문자를 찾습니다.
[b]	백스페이스와 찾습니다.
b	단어와 공백 사이의 위치를 찾습니다.(단어의 경계) 예 : "erb"는 "never"의 "er"는 찾지만 "verb"의 "er"는 찾지 않습니다.
B	단어의 비경계를 찾습니다. 예 : "erB"는 "verb"의 "er"는 찾지만 "never"의 "er"는 찾지 않습니다.
cX	X 가 나타내는 제어 문자를 찾습니다.(control 문자와 찾습니다) 예 : cM은 Control-M 즉, 캐리지 리턴 문자를 찾습니다. x 값은 A-Z 또는 a-z의 범위 안에 있어야 합니다. 그렇지 않으면 c는 리터럴 "c" 문자로 간주됩니다.
d	0부터 9까지의 아라비아 숫자와 찾습니다.. [0-9]과 같은 의미
D	비숫자 문자를 찾습니다. [^0-9]와 같습니다.
f	폼피드 문자(form-feed)를 찾습니다.(x0c와 cL과 같은 의미)
n	linefeed(줄 바꿈 문자)를 찾습니다.(x0a와 cJ과 같은 의미)
r	캐리지 리턴 문자를 찾습니다(x0d와 cM과 같은 의미)
s	공백, 탭, 폼피드 등의 공백을 찾습니다.( [ tnrfv]과 같은 의미)
S	s가 아닌 문자(공백이 아닌 문자)를 찾습니다. ( [^ tnrfv]과 같은 의미)
t	탭 문자를 찾습니다. (x09와 cI와 같은 의미)
v	수직 탭 문자를 찾습니다.(x0b와 cK와 같은 의미)
w	밑줄을 포함한 모든 단어 문자를 찾습니다.( "[A-Za-z0-9_]"와 같은 의미)
W	문자가 아닌 요소, 즉 % 등과 같은 특수 문자를 의미함( "[^A-Za-z0-9_]"와 같은 의미)
n	n은 마지막 일치하는 문장
xn	n을 찾습니다. 여기서 n은 16진수 이스케이프 값입니다. 16진수 이스케이프 값은 정확히 두 자리여야 합니다. 예 : 'x41'은 "A"를 찾고 'x041'은 'x04'와 "1"과 같습니다. 정규식에서 ASCII 코드를 사용할 수 있습니다.
num	num을 찾습니다.(num은 양의 정수) 캡처한 문자열에 대한 역참조입니다. 예 : '(.)1'은 연속적으로 나오는 동일한 문자 두 개를 찾습니다.
nm	8진수 이스케이프 값이나 역참조를 나타냅니다. nm 앞에 최소한 nm개의 캡처된 부분식이 나왔다면 nm은 역참조입니다. nm 앞에 최소한 n개의 캡처가 나왔다면 n은 역참조이고 뒤에는 리터럴 m이 옵니다. 이 두 경우가 아닐 때 n과 m이 0에서 7 사이의 8진수이면 nm은 8진수 이스케이프 값 nm을 찾습니다.
nml	n이 0에서 3 사이의 8진수이고 m과 l이 0에서 7 사이의 8진수면 8진수 이스케이프 값 nml을 찾습니다.
un	n은 4 자리의 16진수로 표현된 유니코드 문자입니다. 예 : u00A9는 저작권 기호(ⓒ)를 찾습니다.
ooctal xhex	8(octal)진수, 10(hex)진수 값

정규 표현식에서 사용하는 property
속성	설명
global	완전 일치
ignoreCase	대문자 소문자 무시
lastIndex	다음 패턴조회를 시작하는 위치
source	조회시킬 패턴
input	검색 문자열의 설정, 변경($_로도 가능)
multiline	줄바구기 코드를 무시할지 여부($_로도 가능) 참(무시하지 않는다), 거짓(무시한다.)로 설정
lastMatch	패턴 조회한 최후의 문자($&로도 가능)
lastParen	패턴 조회한 최후의 substring($+로도 가능)
leftContext	패턴 조회한 값의 앞의 문자($￥Q로도 가능)
rightContext	패턴 조회한 값의 다음 문자($'로도 가능)
$1~$9	패턴 조회한 것의 일부를 저장한다.(9개까지

정규 표현식(Regular Expression) 사용예제 1

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)
var cnj_re = /c/
var cnj_ment = "'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 2

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)
var cnj_re = /CGINJS/
var cnj_ment = "'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 3

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 대소문자 구분없이 해당 문자 또는 문자열을 검색할 경우 끝에 i 를 붙인다.
// 'cginjs' 또는'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분)
var cnj_re = /CGINJS/i
var cnj_ment = "'cginjs' 또는 'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 4

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 여러개의 이어지는 내용들을 검색할 경우는 '-' 를 넣어 표현한다.
// 'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
var cnj_re = /[a-z]/
var cnj_ment = "'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 5

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// | 는 OR 같은 의미
// 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용
// 'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분)
var cnj_re = /x|y|z/
var cnj_ment = "'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 6

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// | 는 OR 같은 의미
// 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용
// 'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
var cnj_re = /[a-z]|[0-9]/
var cnj_ment = "'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 7

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 해당 문자또는 문자열이 없는 경우를 검색할 경우 브래킷('[', ']') 안에 '^' 를 넣는다.
// 'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)
var cnj_re = /[^a-z]/
var cnj_ment = "'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 8

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 문자열의 첫번째 글자가 일치해야할 경우는 '^' 를 브래킷('[', ']') 밖에 넣는다
// 'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)
var cnj_re = /^[a-z]/
var cnj_ment = "'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 9

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 문자열의 끝쪽 글자가 해당 문자 또는 문자열과 일치해야할 경우는 '$' 를 넣는다.
// 'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)
var cnj_re = /[a-z]$/
var cnj_ment = "'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 10

<SCRIPT LANGUAGE="JavaScript">
<!--
function cnj_regexp() {
// 특수문자('', '^', '$', '*', '+', '?', '.', '(', ')', '|', '{', '}', '[', ']')를 검색할 경우는 '' 를 넣는다.
// '' 가 있는 문자열일 겨우 TRUE (대소문자 구분)
var cnj_re = /\/
var cnj_ment = "'' 가 있는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
alert(cnj_ment + "nn문자열이 있군요(true)");
} else {
alert(cnj_ment + "nn문자열이 없군요(fail)");
}
}
//-->
</SCRIPT>
<input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

AND

정규표현식 #001

Javascript 궁금하니? 2009. 11. 30. 13:13

출처: http://joicode.tistory.com/25

1. 만들기

1)
var re=/pattern/flags;

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

3) 차이 - new로 만들때에는 이스케이프문자는 \는 \\로 해주어야 한다.
var re=/\w/;
var re=new RegExp("\\w");

2. 플래그(flag)

g (Global 찾기) 패턴에 맞는 모든문자 찾기
i (Ignore Case) 대소문자 무시
m (Multiline) 여러줄

^ 문자열의 시작을 의미 ,m 플래그를 사용할경우 경우는 각 문자열의 시작
$ 문자열의 끝을 의미 ,m 플래그를 사용할경우 경우는 각 문자열의 끝
. 모든 한문자

[문자들] - 괄호안의 문자 하나와 매치
예) [abc] 는 a나 b나 c중 하나를 의미
[^문자들] - 괄호안의 문자가 아닌문자와 매치
예) [^abc] 는 1,2.... d,e.... 등과 매치
[문자1-문자2] - 문자1과 문자2와 그 사이의 값과 매치
예) [a-d] a,b,c,d와 매치

5. (abc) abc와 매치

6.

|

좌우 패턴중 하나를 의미
예) (abc|def) abc나 def를 의미

7. *, +, ?
* 앞의 패턴이 0회 또는 그 이상반복됨
+ 앞의 패턴이 1회 또는 그 이상반복됨
? 앞의 패턴이 0또는 1회 반복

8. {n}, {n,}, {n,m} 패턴의 반복회수

예)
(abc){1,3} abc가 1에서 3회 반복
(abc){1} abc가 1회반복
(abc){,10} abc가 10회 이하 반복

9. 특수문자 (Escapes Character)

\ 일반문자에 \을 붙여서 특수한 용도로 사용한다.
\f 폼피드(?)
\r 캐리지리턴
\n 새줄
\t 일반 탭문자
\v 세로 탭문자(?)
\0 NUL널문자
[\b] 백스페이스
\s 공백문자
\f, \n, \r, \t, \v, \u00A0, \u2028, \u2029
\S 공백이아닌문자
\w 알파벳문자,숫자,_ [a-zA-Z0-9_]
\W 알파벳문자,숫자,_가 아닌문자 [^a-zA-Z0-9_]).
\d 정수(short for [0-9]).
\D 정수가 아닌 문자 (short for [^0-9]).
\b 단어의 경계 공백,새줄.
\B 경계가 아닌문자.
\cX 컨트롤+문자 E.g: \cm matches control-M.
\xhh 핵사코드
\uhhhh 유니코드

AND

navigationMode opera

Javascript 궁금하니? 2009. 11. 20. 14:52

출처: http://help.dottoro.com/ljrtiivh.php

navigationMode property (history)

Browser support:

Sets or retrieves the navigation type in the history.

Syntax:

object.navigationMode;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

String that specifies the navigation mode.

One of the following values:

automatic

Default. Opera automatically selects an appropriate history navigation mode (compatible or fast). The 'fast' navigation can be used for documents that do not listen for the onload and onunload events.

compatible

The page and scripts will be loaded from cache and processed again when the page is loaded using the back or forward navigation commands.

fast

Pages will be loaded in the exact state that they were in when you left the page. In this case, the onload and onunload events are not fired.

Default: automatic.

Example 1:

This example illustrates the use of the navigationMode property:

<head>
<script>
function GetNavMode () {
alert (window.history.navigationMode);
}
</script>
</head>
<body>
<button onclick="GetNavMode ()">Get the navigation mode!</button>
</body>

Copy Code

AND

정규식 기초

Javascript 궁금하니? 2009. 11. 10. 17:04

출처: http://blog.naver.com/apchima/80060468198

우선 사용예는 다음과 같다.

예)
<script language="javascript">
function chk(pstr) {
var chkRep = /....-..-../;
alert(chkRep.test(pstr));
}
</script>

정규식은 다음과 같다.

(1) ^ (caret) : 라인의 처음이나 문자열의 처음을 표시
예 : ^aaa (문자열의 처음에 aaa를 포함하면 참, 그렇지 않으면 거짓)

(2) $ (dollar) : 라인의 끝이나 문자열의 끝을 표시
예 : aaa$ (문자열의 끝에 aaa를 포함하면 참, 그렇지 않으면 거짓)

(3) . (period) : 임의의 한 문자를 표시
예 : ^a.c (문자열의 처음에 abc, adc, aZc 등은 참, aa 는 거짓)
a..b$ (문자열의 끝에 aaab, abbb, azzb 등을 포함하면 참)

(4) [] (bracket) : 문자의 집합이나 범위를 나타냄, 두 문자 사이의 "-"는 범위를 나타냄
[]내에서 "^"이 선행되면 not을 나타냄
이외에도 "문자클래스"를 포함하는 [:문자클래스:]의 형태가 있다.
여기에서 "문자클래스"에는 alpha, blank, cntrl, digit, graph, lower, print, space, uppper, xdigit가 있다.
이에 대한 자세한 내용은 C언어의 <ctype.h>를 참조하면 된다.
예를 들어 [:digit:]는 [0-9]와 [:alpha:]는 [A-Za-z]와 동일하다.
이외에 [:<:]와 [:>:]는 어떤 단어(숫자, 알파벳, '_'로 구성됨)의 시작과 끝을 나타낸다.
예 : [abc] (a, b, c 중 어떤 문자, "[a-c]."과 동일)
[Yy] (Y 또는 y)
[A-Za-z0-9] (모든 알파벳과 숫자)
[-A-Z]. ("-"(hyphen)과 모든 대문자)
[^a-z] (소문자 이외의 문자)
[^0-9] (숫자 이외의 문자)
[[:digit:]] ([0-9]와 동일)

(5) {} (brace) : {} 내의 숫자는 직전의 선행문자가 나타나는 횟수 또는 범위를 나타냄
예 : a{3} ('a'의 3번 반복인 aaa만 해당됨)
a{3,} ('a'가 3번 이상 반복인 aaa, aaaa, aaaa, ... 등을 나타냄)
a{3,5} (aaa, aaaa, aaaaa 만 해당됨)
ab{2,3} (abb와 abbb 만 해당됨)
[0-9]{2} (두 자리 숫자)
doc[7-9]{2} (doc77, doc87, doc97 등이 해당)
[^Zz]{5} (Z와 z를 포함하지 않는 5개의 문자열, abcde, ttttt 등이 해당)
.{3,4}er ('er'앞에 세 개 또는 네 개의 문자를 포함하는 문자열이므로 Peter, mother 등이 해당)

(6) * (asterisk) : "*" 직전의 선행문자가 0번 또는 여러번 나타나는 문자열
예 : ab*c ('b'를 0번 또는 여러번 포함하므로 ac, ackdddd, abc, abbc, abbbbbbbc 등)
* (선행문자가 없는 경우이므로 임의의 문자열 및 공백 문자열도 해당됨)
.* (선행문자가 "."이므로 하나 이상의 문자를 포함하는 문자열, 공백 문자열은 안됨)
ab* ('b'를 0번 또는 여러번 포함하므로 a, accc, abb, abbbbbbb 등)
a* ('a'를 0번 또는 여러번 포함하므로 k, kdd, sdfrrt, a, aaaa, abb, 공백문자열 등) doc[7-9]* (doc7, doc777, doc778989, doc 등이 해당)
[A-Z].* (대문자로만 이루어진 문자열)
like.* (직전의 선행문자가 '.'이므로 like에 0 또는 하나 이상의 문자가 추가된 문자열이됨, like, likely, liker, likelihood 등)

(7) + (asterisk) : "+" 직전의 선행문자가 1번 이상 나타나는 문자열
예 : ab+c ('b'를 1번 또는 여러번 포함하므로 abc, abckdddd, abbc, abbbbbbbc 등, ac는 안됨)
ab+ ('b'를 1번 또는 여러번 포함하므로 ab, abccc, abb, abbbbbbb 등)
like.+ (직전의 선행문자가 '.'이므로 like에 하나 이상의 문자가 추가된 문자열이 됨, likely, liker, likelihood 등, 그러나 like는 해당안됨)
[A-Z]+ (대문자로만 이루어진 문자열)

(8) ? (asterisk) : "?" 직전의 선행문자가 0번 또는 1번 나타나는 문자열
예 : ab?c ('b'를 0번 또는 1번 포함하므로 abc, abcd 만 해당됨)

(9) () (parenthesis) : ()는 정규식내에서 패턴을 그룹화 할 때 사용

(10) | (bar) : or를 나타냄
예 : a|b|c (a, b, c 중 하나, 즉 [a-c]와 동일함)
yes|Yes (yes나 Yes 중 하나, [yY]es와 동일함)
korea|japan|chinese (korea, japan, chinese 중 하나)

(11) (backslash) : 위에서 사용된 특수 문자들을 정규식내에서 문자를 취급하고 싶을 때 ''를 선행시켜서 사용하면됨
예 : filename.ext ("filename.ext"를 나타냄)
[?[\]] ('?', '[', '', ']' 중 하나)

정규식에서는 위에서 언급한 특수 문자를 제외한 나머지 문자들은 일반 문자로 취급함

#####################################################################################

1. 개념잡기

일반화 시킨 표현. 이것을 정규표현이라고 요약할 수 있을 것 같다.
다음의 과정을 너무 쉽다 생각말고 따라오길 바란다.

- 감잡기

"12354" -> 숫자
"asdfasf" -> 알파벳
두 가지의 간단정규표현을 만들었다. 실생활의 보기와 비추어보자.
"길이가 3인 이름!"
위의 표현은 길이를 표시하는 방법이 없다. 조금 더 발전시켜서 "알파벳{3}"이런식
으로 길이를 표현할 수 있도록 한다. 그리고, "알파벳"란 것도 너무 길다 "알"
이라고 한 글자로 표현한다. 그러면 "길이가 3인 이름"은
"알{3}"으로 표시가 가능하다.
길이가 10인 숫자는 "수{10}"
"길이가 1인 알파벳이 나오고 그 다음에 길이가 3인 숫자가 나오는 문자열"! ->
"알{1}수{3}"얼핏이나마 감이 올 것이다.
"첫 글자는A, 그 다음은 아무 알파벳 5글자" -> "A알{5}"

- 조금 더

아이디는 대개 첫 글자는 영문이고 두 번째부터는 영문이나 숫자가 온다. 이것을
표현하기 위해선 이것 들 중에 하나란 의미를 갖는 새로운 표현이 필요하다.
"a,b,c,d 중에 하나" -> [abcd]
응용하면,
"알파벳이나, 숫자중 하나" -> [알수]
"[" 안에 있는 문자들의 순서는 의미가 없으며, 그 표현은 (클래스라고 한다.)
결국 한 글자를 말한다.
위에서 말한 "첫 글자는 영문, 두 번째 부터는 영문이나 숫자가 11자"를
표현하면, "알[알수]{11}".
그런데, 실제로 모든 아이디가 12자인 것은 아니다, 대개 4자부터 12자를 지원한다.
새로운 표현이 등장한다. "몇 자부터 몇 자"
"A가 3글자부터 12자" -> "A{3,12}"
"알파벳이나 숫자가 1자부터 100자" -> "[알수]{1,100}"
이제 아이디를 다시 정의하자.
"첫 글자는 영문, 영문이나 숫자가 3자부터 11자" -> "알[알수]{3,11}"

2. 표현식

지금 까지의 규칙에서 설명한 용어를 실제 정규표현에서 사용하는 표현으로 바꾸고,
다른 세부적인 옵션에 대해 알아보자.

: 다음의 글자가 특별한 문자임을 나타낸다. 때론, 그 다음 문자 자체를 의미하기
도 한다.
보기를 들면, "n"은 문자""과 문자"n" 두 글자와 매치되는 것을 의미하는 것이 아
닌,
새줄(New Line)을 의미하며, ""은 첫 "" 다음 문자인 "" 자체를 의미한다.
즉, ""은
""과 매칭된다.

^ : 입력문자열의 맨 처음을 의미한다. (맨 첫 글자가 아니라, 맨 처음이란 문맥적 의
미를
말한다. 아주 중요하다) 기본적으로 정규표현은 입력 문자열의 한 줄에만 적용된다.
하지만, 옵션에 따라 여러줄에 적용할 수도 있다. 그럴 경우에는 "^"는 "n"
나 "r"
다음의 위치를 의미한다.

$ : "^"는 반대로 입력 문자열의 맨 끝을 의미한다. 역시 여러줄에 정규표현이 적용
될
경우에는 "n"이나 "r"의 앞의 위치를 의미한다.

* : 이 문자 앞의 표현이 0번내지 무한번 반복될 수 있음을 말한다.
보기를 들면, /a*/은 "a", "", "aaaa", "aaaaa"와 매칭된다.
(0번이상은 없어도 된다는 것을 의미한다.)

+ : *와 같지만, 0번이상이 아니라 1번이상이라는 점을 제외하곤 /*/와 같다.

? : 앞의 표현이 0번 또는 1번. /do(es)?/는 "do", "does"와 매칭된다.

{n} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, 앞의 표현이
n번 매치되는 것을 말한다.

{n,} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, n번 이상
매치되는 것을 말한다.

{n,m} : 앞의 표현이 n번 이상 부터 m번 이하까지 매칭되는 것을
말하며, /*/는 /{0,}/과 같으며, /+/는 /{1,}/과 /?/는 /{0,1}/으로
표현 가능하다.

. : "n"을 제외한 한 글자를 뜻한다. 만일 모든 글자를 표현하고
싶다면("n"마저도 합친) /[.n]/을 사용하면 된다.

x|y : x 또는 y와 매칭된다. 보기를 들면, /z|food/는 "z" 또는
"food"와 매칭된다. /(z|f)ood/는 "zood" 또는 "food"와 매칭된다.
(참고로 괄호는 묶어준 것 이상의 의미가 있다.)

(패턴) : 해당 패턴과 매칭시키고, 그 부분을 특정 변수에 담는다.
그 변수 이름은 JScript는 $0~$9까지의 변수에 저장이 되고(Perl과 같다.),
VBScript에서는 SubMatches 컬렉션에 저장된다.
괄호기호 자체와 매치시키고 싶다면? /(/와 /)/를 사용한다.

(?:패턴) : 해당 패턴과 매칭은 시키지만, 그 부분을 특정 변수에
담지 않는다. 왜 이게 필요할까?
위의 보기에서 /(z|f)ood/는 "zood" 또는 "food"와 매칭된다고 했는데,
단순히 매칭의 목적으로 사용했지만, "zood"의 경우 "z"가 $0 이란
변수에 저장이 되고 말았다. 이러한 것을 막기 위해서 사용하는 것이
(?:패턴)이다.

(?=패턴) : (?:패턴)과 동일하지만, 패턴과 일치한 부분이후부터
다음 매치가 일어나지 않고 패턴 앞부터 다시 매칭이 진행된다.
즉, 룩업(lookup, lookahead)을 할 뿐이다. /Windows (?=95|98|NT|2000)/ 은
"Windows 2000"의 "Windows" 부분과 매칭이 되며 다음 매칭은
"2000" 다음 부터가 아닌 "Windows" 다음 부터 진행이 된다.

(?!패턴) : (?=패턴)과 반대다. /Windows (?=95|98|NT|2000)/ 은
"Windows 3.1"의 "Windows" 부분과 매칭이 된다.

[xyz] : "["안에 있는 표현중 하나를 의미한다.

[^xyz] : "["안에 있는 표현을 제외한 것중 하나를 의미한다.
"[^abc]"는 "plain"의 "p"때문에 매칭된다.

[a-z] : "a"부터 "z" 까지의 문자중 하나

[^a-z] : "a"부터 "z" 까지의 문자를 제외한 하나

b : 단어의 경계(단어와 공백, "n", "r"의 사이)와 매칭된다.
보기를 들면, "erb"는 "never"와는 매칭되지만, "verb"와는 매칭되지 않는다.

B : 단어의 경계가 아닌 것과 매칭된다. "erB"는 "verb"와는
매칭되지만, "never"와는 매칭되지 않는다.

cx : Ctrl+x 키와 매칭된다. "cc"는 Ctrl+C와 매칭된다. x의 범위는
[a-zA-Z]이며, 만일 이 이외의 문자를 사용한다면 "c"는 "c"와 동일하다.

d : [0-9]와 같다.

D : [^0-9]와 같다. 참고로 대문자는 소문자의 반대 의미를 갖는다.

f : 폼피드(form-feed) 문자를 의미하며, "x0c"와 "cL"과 동일하다.

n : 새 줄(newline)를 의미하며, "x0a"와 "cJ"와 동일하다.

r : 캐리지 리턴(carriage return)을 의미하며, "x0d"와 "cM"과 동일하다.

t : 탭. "x09", "cI"과 동일

v : 버티컬 탭. "x0b", "cK"과 동일

s : 화이트스페이스를 의미한다. 화이트스페이스란 공백, 탭, 폼피드,
캐리지리턴등을 의미한다. [ fnrtv]과 동일("f"앞에 공백이 있다. 주의!)

S : "[^ fnrtv]"

w : "_"를 포함한 일반적인 단어에 사용되는 문자를 말한다.
"[A-Za-z0-9_]" 과 동일

W : "[^A-Za-z0-9_]"

xn : n은 2자리 16진수이며, 해당 16진수 코드와 매칭된다. "x412"는 16진수
41은 "A"이기 때문에 "A2"와 매칭된다.

num : 캡쳐한 매칭을 가리킨다(백레퍼런스, backreference).
"(.)1"은 연속된 두개의 문자열을 의미한다.
n : "1"은 위에서 캡쳐한 매칭(backreference)를 가리킨다고 했는데,
만일 이 패턴앞에 어떠한 n개의 캡쳐한 표현이 있다면 백레퍼런스이지만,
그렇지 않은 경우에는 8진수로 간주하여 해당 코드의 문자와 매칭된다.

un : n은 4자리 UNICODE 이다. "u00A9"은 copyright 심볼인 "ⓒ"와 매칭된다.

greedy, non-greedy

? : 앞에서 설명했는데, 왜 또? 라고 생각할 것이다.
?은 문맥에 따라 특별한 의미를 갖는다.
패턴 "o*"는 "foooood"와 매칭된다. 당연하다! 하지만, "f"앞의 "o"와
매칭되는 것이 아니다!! "ooooo"와 매칭된 것이다. 즉, 기본으로
정규표현 매칭은 가장 큰 범위를 선택한다. 이것을 greedy하다고 한다.
하지만, 때론 작은 범위에 매칭시킬 필요가 있을 경우가 있다.
(이의 적절한 보기는 잠시 후에 나온다.) "o*?"가 방금 말한
non-greedy 매칭이다.
수량관련 문자인 "*", "+", "?", "{n}", "{n,}", "{n,m}" 다음에 "?"가
나오면 non-greedy 매칭이된다.
잠시, 위에서 "o*?"가 "o"와 매칭된다고 했는데 이상하게 생각한 분이
있었을 것이다. 맞다. "o*?"는 ""와 매칭되었다. "*"는 0개이상임을
잊어선 안된다. "o+?"가 "o"와 매칭된다.

4. 보기

- 웹 주소

"http://msdn.microsoft.com:80/scripting/default.htm"
위의 주소를 표현할 수 있는 정규표현은 아래와 같다.
/(w+)://([^/:]+)(:d*)?([^# ]*)/
$1 : http
$2 : msdn.microsoft.com
$3 : 80
$4 : /scripting/default.htm

- 중복된 단어를 하나로

중복된 영어단어를 하나로 합치기 위해선, 우선 단어를 찾아야한다.
그리고 단어는 앞 뒤가 단어의 경계이어야한다. (말이 참 이상하지만..)
따라서, 아래와 같은 1차 정규표현을 얻을 수 있다.

/b([a-z]+)b/

연속해서 동일한 두개의 단어... 앞에서 캡쳐한 표현을 다시 활용하면 된다.
그리고, 단어와 단어 사이엔 화이트스페이스가 있다.

/b([a-z]+)s+1b/

- HTML 태그 제거

HTML문서에서 태그를 제거한 문서를 추출하고자 한다.
태그는 "<"와 ">"로 감싸여 있다.

/<.*>.*</.*>/

그런데, 위의 정규표현을 HTML문서에 적용하여 해당 패턴을 "",
빈문자열로 바꾸면 문서는 빈 문서가 되고 만다.

<html>
<title>...</title>
<body>
<font>.... </font>
...
</body>
greedy한 매칭이 기본값이라고 위에서 언급을 했다. 따라서,
위의 HTML 문서를 보면, <html>....</body>로 생각할 수 있다.
따라서, 문서 전체가 사라지는 것이다. 이것을 막기 위해선 "*"뒤에 "?"를
추가하면 된다.

/<.*?>.*?</.*?>/

아직 끝나지 않았다. :)

좀더 정제를 한다면, 올바른 HTML 문서는 <태그명>과 </태그명>이
서로 일치한다. 이것도 적용한다면,

/<.(*?)>.(*?)</1>/

위의 $1에 해당되는 부분을 좀 더 생각해보면, ">"를 제외한 문자로
볼 수 있다. 따라서 최종적으로 아래와 같이 정리된다.

/<(w+)[^>]*?>(.*?)</1>/

- URL

/(?:^|")(http|ftp|mailto):(?://)?(w+(?:[.:@]w+)*?)(?:/|@)([^"?]*?)(?:?
([^?"]*?))?(?:$|")/

- float 상수

/^(((+|-)?d+(.d*)?)|((+|-)?(d*.)?d+))$/ -1.1 1.1 .9 .8

정규식 구문

정규식은 일반 문자(예: a에서 z)와 메타문자 로 알려진 특수 문자로 구성된 텍스트 패턴입니다. 패턴은 텍스트 본문을 검색할 때 일치하는 문자열을 하나 이상 설명합니다. 정규식은 검색되는 문자열과 일치하는 문자 패턴을 찾는 템플릿의 역할을 합니다.

일반적으로 볼 수 있는 몇 가지 정규식 예는 다음과 같습니다.

JScript VBScript 검색

/^[ t]*$/	"^[ t]*$"	빈 줄을 찾습니다.
/d{2}-d{5}/	"d{2}-d{5}"	2자리, 하이픈 및 5자리로 구성된 ID 번호를 찾습니다.
/<(.)>.</1>/	"<(.)>.</1>"	HTML 태그를 찾습니다.

아래 표는 정규식 컨텍스트에 사용되는 모든 메타문자와 메타문자의 동작을 보여줍니다.

문자 설명

그 다음 문자를 특수 문자, 리터럴, 역참조, 또는 8진수 이스케이프로 표시합니다. 예를 들어, "n"은 문자 "n"을 찾고 "n"은 줄 바꿈 문자를 찾습니다. "" 시퀀스는 ""를 찾고 "("는 "("를 찾습니다.
^	입력 문자열의 시작 위치를 찾습니다. Multiline 속성이 설정되어 있으면 ^는 'n' 또는 'r'앞의 위치를 찾습니다.
$	입력 문자열의 끝 위치를 찾습니다. Multiline 속성이 설정되어 있으면 $는 'n' 또는 'r'뒤의 위치를 찾습니다.
*	부분식의 선행 문자를 0개 이상 찾습니다. 예를 들어, "zo"는 "z", "zoo" 등입니다. 는 {0,}와 같습니다.
+	부분식의 선행 문자를 한 개 이상 찾습니다. 예를 들어, "zo+"는 "zo", "zoo" 등이지만 "z"는 아닙니다. +는 {1,}와 같습니다.
?	부분식의 선행 문자를 0개 또는 한 개 찾습니다. 예를 들어, "do(es)?"는 "do" 또는 "does"의 "do"를 찾습니다. ?는 {0,1}과 같습니다.
{ n }	n 은 음이 아닌 정수입니다. 정확히 n 개 찾습니다. 예를 들어, "o{2}"는 "Bob"의 "o"는 찾지 않지만 "food"의 o 두 개는 찾습니다.
{ n ,}	n 은 음이 아닌 정수입니다. 정확히 n 개 찾습니다. 예를 들어, "o{2}"는 "Bob"의 "o"는 찾지 않지만 "foooood"의 모든 o는 찾습니다. "o{1,}"는 "o+"와 같고, "o{0,}"는 "o*"와 같습니다.
{ n , m }	m 과 n 은 음이 아닌 정수입니다. 여기서 m 은 n 보다 크거나 같습니다. 최소 n 개, 최대 m 개 찾습니다. 예를 들어, "o{1,3}"은 "fooooood"의 처음 세 개의 o를 찾습니다. "o{0,1}"은 "o?"와 같습니다. 쉼표와 숫자 사이에는 공백을 넣을 수 없습니다.
?	이 문자가 다른 한정 부호(*, +, ?, { n }, { n ,}, { n , m })의 바로 뒤에 나올 경우 일치 패턴은 제한적입니다. 기본값인 무제한 패턴은 가능한 많은 문자열을 찾는 데 반해 제한적인 패턴은 가능한 적은 문자열을 찾습니다. 예를 들어, "oooo" 문자열에서 "o+?"는 "o" 한 개만 찾고, "o+"는 모든 "o"를 찾습니다.
.	"n"을 제외한 모든 단일 문자를 찾습니다. "n"을 포함한 모든 문자를 찾으려면 '[.n]' 패턴을 사용하십시오.
( pattern )	pattern 을 찾아 검색한 문자열을 캡처합니다. 캡처한 문자열은 VBScript의 경우 SubMatches 컬렉션, Jscript의 경우 $0 ... $9 속성을 이용하여 결과로 나오는 Matches 컬렉션에서 추출할 수 있습니다. 괄호 문자인 ( )를 찾으려면 "(" 또는 ")"를 사용하십시오.
(?: pattern )	pattern 을 찾지만 검색한 문자열을 캡처하지 않습니다. 즉, 검색한 문자열을 나중에 사용할 수 있도록 저장하지 않는 비캡처 검색입니다. 이것은 패턴의 일부를 "or" 문자(\|)로 묶을 때 유용합니다. 예를 들어, 'industr(?:y\|ies)는 'industry\|industries'보다 더 경제적인 식입니다.
(?= pattern )	포함 예상 검색은 pattern 과 일치하는 문자열이 시작하는 위치에서 검색할 문자열을 찾습니다. 이것은 검색한 문자열을 나중에 사용할 수 있도록 캡처하지 않는 비캡처 검색입니다. 예를 들어, "Windows(?=95\|98\|NT\|2000)"는 "Windows 2000"의 "Windows"는 찾지만 "Windows 3.1"의 "Windows"는 찾지 않습니다. 예상 검색은 검색할 문자열을 찾은 후 예상 검색 문자열을 구성하는 문자 다음부터가 아니라 마지막으로 검색한 문자열 바로 다음부터 찾기 시작합니다.
(?! pattern )	제외 예상 검색은 pattern 과 일치하지 않는 문자열이 시작하는 위치에서 검색할 문자열을 찾습니다. 이것은 검색한 문자열을 나중에 사용할 수 있도록 캡처하지 않는 비캡처 검색입니다. 예를 들어, "Windows(?!95\|98\|NT\|2000)"는 "Windows 3.1"의 "Windows"는 찾지만 "Windows 2000"의 "Windows"는 찾지 않습니다. 예상 검색은 검색할 문자열을 찾은 후 예상 검색 문자열을 구성하는 문자 다음부터가 아니라 마지막으로 검색한 문자열 바로 다음부터 찾기 시작합니다.
x \| y	x 또는 y 를 찾습니다. 예를 들어, "z\|food"는 "z" 또는 "food"를 찾습니다. "(z\|f)ood"는 "zood" 또는 "food"를 찾습니다.
[ xyz ]	문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, "[abc]"는 "plain"의 "a"를 찾습니다.
[^ xyz ]	제외 문자 집합입니다. 괄호 밖의 문자 중 하나를 찾습니다. 예를 들어, "[^abc]"는 "plain"의 "p"를 찾습니다.
[ a-z ]	문자 범위입니다. 지정한 범위 안의 문자를 찾습니다. 예를 들어, "[a-z]"는 "a"부터 "z" 사이의 모든 소문자를 찾습니다.
[^ a-z ]	제외 문자 범위입니다. 지정된 범위 밖의 문자를 찾습니다. 예를 들어, "[^a-z]"는 "a"부터 "z" 사이에 없는 모든 문자를 찾습니다.
b	단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, "erb"는 "never"의 "er"는 찾지만 "verb"의 "er"는 찾지 않습니다.
B	단어의 비경계를 찾습니다. "erB"는 "verb"의 "er"는 찾지만 "never"의 "er"는 찾지 않습니다.
c x	X 가 나타내는 제어 문자를 찾습니다. 예를 들어, cM은 Control-M 즉, 캐리지 리턴 문자를 찾습니다. x 값은 A-Z 또는 a-z의 범위 안에 있어야 합니다. 그렇지 않으면 c는 리터럴 "c" 문자로 간주됩니다.
d	숫자 문자를 찾습니다. [0-9]와 같습니다.
D	비숫자 문자를 찾습니다. [^0-9]와 같습니다.
f	폼피드 문자를 찾습니다. x0c와 cL과 같습니다.
n	줄 바꿈 문자를 찾습니다. x0a와 cJ와 같습니다.
r	캐리지 리턴 문자를 찾습니다. x0d와 cM과 같습니다.
s	공백, 탭, 폼피드 등의 공백을 찾습니다. "[ fnrtv]"와 같습니다.
S	공백이 아닌 문자를 찾습니다. "[^ fnrtv]"와 같습니다.
t	탭 문자를 찾습니다. x09와 cI와 같습니다.
v	수직 탭 문자를 찾습니다. x0b와 cK와 같습니다.
w	밑줄을 포함한 모든 단어 문자를 찾습니다. "[A-Za-z0-9_]"와 같습니다.
W	모든 비단어 문자를 찾습니다. "[^A-Za-z0-9_]"와 같습니다.
x n	n 을 찾습니다. 여기서 n 은 16진수 이스케이프 값입니다. 16진수 이스케이프 값은 정확히 두 자리여야 합니다. 예를 들어, 'x41'은 "A"를 찾고 'x041'은 'x04'와 "1"과 같습니다. 정규식에서 ASCII 코드를 사용할 수 있습니다.
num	num 을 찾습니다. 여기서 num 은 양의 정수입니다. 캡처한 문자열에 대한 역참조입니다. 예를 들어, '(.)1'은 연속적으로 나오는 동일한 문자 두 개를 찾습니다.
n	8진수 이스케이프 값이나 역참조를 나타냅니다. n 앞에 최소한 n개의 캡처된 부분식이 나왔다면 n 은 역참조입니다. 그렇지 않은 경우 n 이 0에서 7 사이의 8진수이면 n 은 8진수 이스케이프 값입니다.
nm	8진수 이스케이프 값이나 역참조를 나타냅니다. nm 앞에 최소한 nm개의 캡처된 부분식이 나왔다면 nm 은 역참조입니다. nm 앞에 최소한 n개의 캡처가 나왔다면 n 은 역참조이고 뒤에는 리터럴 m이 옵니다. 이 두 경우가 아닐 때 n과 m이 0에서 7 사이의 8진수이면 nm 은 8진수 이스케이프 값 nm을 찾습니다.
nml	n 이 0에서 3 사이의 8진수이고 m 과 l 이 0에서 7 사이의 8진수면 8진수 이스케이프 값 nml 을 찾습니다.
u n	n 은 4 자리의 16진수로 표현된 유니코드 문자입니다. 예를 들어, u00A9는 저작권 기호(©)를 찾습니다.

--------------------------------------------------------------------------------
Visual Basic Scripting Edition에서 정규 표현식 기능 이용하기
--------------------------------------------------------------------------------

정규 표현식이란 무엇인가요?
정규 표현식이란 무엇일까요? 정규 표현식은 복잡한 패턴 매칭 기능과 텍스트형 검색-대체 알고리즘을 개발할 수 있는 툴을 제공합니다. Perl, egrep, awk, 또는 sed 개발자에게 정규 표현식이 무엇이냐고 물어보면, 정규 표현식은 텍스트와 데이터를 조작할 때 사용할 수 있는 가장 강력한 유틸리티라고 대답할 것입니다. 개발자는 패턴을 만들어 특정 문자열을 매치키시킴으로써 데이터를 검색하거나 추출하거나 교체하는 일을 완벽하게 제어할 수 있습니다. 간단히 말해서, 정규 표현식을 정복하면 데이터도 정복할 수 있는 것입니다.

여기서는, VBScript 정규 표현식과 관련된 모든 개체를 설명하고, 일반적인 정규 표현식 패턴을 간략하게 살펴보고, 실제 코드로 정규 표현식을 사용하는 예를 들어보도록 합시다.

VBScript RegExp 개체
VBScript 5.0 버전은 정규 표현식을 하나의 개체로서 제공합니다. VBScript RegExp 개체는 설계 면에서 JScript의 RegExp 및 String 개체와 비슷하고, 구문 면에서는 Visual Basic과 일치합니다. 먼저, VBScipt RegExp 개체의 속성과 메소드에 관해 알아봅시다. VBScript RegExp 개체는 사용자에게 세 개의 속성과 세 개의 메소드를 제공합니다.

속성 메소드
Pattern Test(검색-문자열)
IgnoreCase Replace (검색-문자열, 대체-문자열)
Global Execute (검색-문자열

Pattern - 정규 표현식을 정의하는 데 사용되는 문자열. 이 속성은 정규 표현식 개체를 사용하기 전에 먼저 설정해야 합니다. Pattern에 관한 내용은 아래에 자세히 설명되어 있습니다.
IgnoreCase - 문자열 안에서 일치하는 문자가 발생할 모든 가능성에 대해 정규 표현식을 테스트해야 하는지를 나타내는 부울 논리 속성입니다. IgnoreCase의 기본 설정 값은 False입니다.
Global - 문자열 안에서 일치하는 문자가 발생할 모든 가능성에 대해 정규 표현식을 테스트해야 하는지 여부를 나타내는 읽기 전용 부울 논리 속성입니다. Global의 기본 설정 값은 False입니다.
Test (문자열) - Test 메소드는 문자열을 매개 변수로 받아 그 문자열이 정규 표현식에 일치하면 True를 반환하고 그렇지 않으면 False를 반환합니다.
Replace (검색-문자열, 대체-문자열) - Replace 메소드는 두 개의 문자열을 매개 변수로 받습니다. 검색-문자열 안에 정규 표현식과 일치하는 문자열이 있으면, 그 문자열을 대체-문자열로 바꾸고, 바뀐 새로운 문자열을 반환합니다. 만일 일치하는 문자열이 없으면, 원래의 검색-문자열을 반환합니다.
Execute (검색-문자열) - Execute 메소드는 Matches 컬렉션 개체를 반환하는 점만 제외하면 Replace 메소드의 작동과 비슷합니다. Matches 컬렉션 개체에는 정규 표현식에 일치하는 각 문자열에 대한 Match 개체가 들어 있습니다. 이 메소드는 원래의 문자열을 변경하지 않습니다.
더 자세한 내용과 예제 코드는,Microsoft Scripting Site 사이트를 참고하시기 바랍니다.

VBScript Matches 컬렉션 개체
앞에서 말했듯이, Matches 컬렉션 개체는 Execute 메소드를 실행한 경우에만 반환됩니다. 이 컬렉션 개체는 0개 이상의 Match 개체를 포함할 수 있으며, 이 개체의 속성은 읽기 전용입니다.

속성
Count
Item

Count -컬렉션 안에 있는 Match 개체의 개수를 나타내는 읽기 전용 값입니다.
Item - Matches 컬렉션 개체에서 Match 개체를 임의로 액세스할 수 있게 만드는 읽기 전용 값입니다. For-Next 루프를 사용하면, Matches 컬렉션 개체에서 Match 개체를 순서대로 액세스할 수도 있습니다.
더 자세한 내용과 예제 코드는, Microsoft Scripting Site 를 참고하시기 바랍니다.

VBScript Match 개체
각 Mathes 개체에는 0개 이상의 Match 개체가 들어 있습니다. 이 Match 개체들은 정규 표현식을 사용했을 때 성공적으로 일치한 문자열을 나타냅니다. 이 개체의 속성은 읽기 전용이며 일치하는 각 문자열에 대한 정보를 저장합니다.

속성
FirstIndex
Length
Value

FirstIndex - 원래 문자열 안에서 정규 표현식에 일치하는 문자열의 위치를 나타내는 읽기 전용 값입니다. 이 색인은 위치를 기록하는데 0 기준 오프셋(문장의 첫 위치가 0번째임을 뜻함)을 사용합니다.
Length - 일치된 문자열의 전체 길이를 나타내는 읽기 전용 값입니다
Value - 일치된 값이나 텍스트를 나타내는 읽기 전용 값입니다. 이 값은Match 개체를 액세스할 때 사용되는 기본 값이기도 합니다.
더 자세한 내용과 예제 코드는, Microsoft Scripting Site 를 참고하시기 바랍니다.

패턴은 어떤 형태인가?
자, 지금까지는 이 모든 것이 지나치게 훌륭하고 환상적인 것으로 느껴지셨겠지만 실제는 어떨까요? 정규 표현식은 그 자체가 하나의 언어라고 할 수 있지만, Perl에 익숙한 사용자들이라면 누구나 쉽게 사용할 수 있습니다. VBScript는 Perl로부터 패턴 셋을 유도하기 때문에, 주요 기능도 Perl과 비슷합니다. 그러면, 정규 표현식을 정의하는 데 사용되는 패턴 셋 몇 가지를 살펴보도록 합시다. 패턴 셋은 여러 범주와 영역으로 분류할 수 있습니다.

포지션 매칭

포지션 매칭은 ^와 $(을)를 사용하여 문자열의 시작이나 끝을 검색합니다. 패턴 속성을 "^VBScript"로 설정할 경우, "VBScript is cool."에는 일치하지만, "I like VBScript."에는 일치하지 않습니다.

기호 기능
^ 문자열의 시작만 비교합니다

"^A"는 "An A+ for Anita."의 첫번째 "A"를 비교합니다.
$ 문자열의 끝을 비교합니다.

"t$"는 "A cat in the hat"의 마지막 "t"를 비교합니다.
b 임의의 워드 영역을 비교합니다

"lyB"는 "possibly tomorrow."의 "ly"를 비교합니다
B Matches any non-word boundary

리터럴

리터럴은 영숫자 문자, ASCII, 8진수 문자, 16진수 문자, UNICODE, 또는 특수 구분 문자 등을 모두 총칭하는 말입니다. 특별한 의미를 갖고 있는 몇몇 문자는 구분해야 합니다. 이들 특수 문자를 비교하려면, 정규 표현식을 문자 앞에 를 사용해야 합니다.

기호 기능
영숫자 영문자와 숫자를 비교합니다.
n 새로운 라인을 비교합니다
f 용지 공급을 비교합니다
r 캐리지 리턴을 비교합니다.
t 가로 탭을 비교합니다.
v 수평 탭을 비교합니다.
? ?(을)를 비교합니다.
* *(을)를 비교합니다.
+ +(을)를 비교합니다.
. . (을)를 비교합니다.
| |(을)를 비교합니다.
{ {(을)를 비교합니다.
} }(을)를 비교합니다.
(을)를 비교합니다.
[ [(을)를 비교합니다.
] ] (을)를 비교합니다.
( ((을)를 비교합니다.
) ) (을)를 비교합니다.
xxx 8진수 xxx로 표시된 ASCII 문자를 비교합니다.

"50"은 "(" 또는 chr (40) (을)를 비교합니다.
xdd 16진수 dd로 표시된 ASCII 문자를 비교합니다.

"x28"은 "(" 또는 chr (40) (을)를 비교합니다.
uxxxx UNICODE xxxx로 표시된 ASCII 문자를 비교합니다.

"u00A3"은 "£"를 비교합니다.

문자 클래스

문자 클래스를 사용하면 괄호 [] 안에 식을 삽입하여 사용자에 의해 정의된 그룹을 만들 수 있습니다. 문자 클래스의 문자들을 제외한 나머지 문자들을 사용하려면 [] 안에 ^(을)를 첫번째 문자로 삽입해야 합니다. 또한, 문자의 범위를 지정할 때는 대시를 사용합니다. 예를 들어, 정규 표현식 "[^a-zA-Z0-9]"(은)는 영문자와 숫자를 제외한 모든 문자를 비교합니다. 추가로 구분 문자와 리터럴로 묶인 문자셋도 있습니다.

기호 기능
[xyz] 문자셋 안에 포함되어 있는 임의의 한 문자를 비교합니다.

"[a-e]" (은)는 "basketball" 안의 "b"를 비교합니다.
[^xyz] 문자 셋 안에 포함되어 있지 않은 임의의 한 문자를 비교합니다.

"[^a-e]"는 "basketball" 안의 "s"를 비교합니다.
. n을 제외한 임의의 문자를 비교합니다.
w 임의의 워드 문자를 비교합니다.
[a- zA-Z_0-9]와 동일함.
W 워드 문자를 제외한 임의의 문자를 비교합니다.
[^a-zA-Z_0-9]와 동일함.
d 임의의 숫자를 비교합니다. [0-9].
D 숫자를 제외한 임의의 문자를 비교합니다.
[^0-9]와 동일함.
s 임의의 공백 문자를 비교합니다.
[ trnvf]와 동일함.
S 공백 문자가 아닌 임의의 문자를 비교합니다.
[^ trnvf]와 동일함.

반복

반복 매칭을 사용하면 정규 표현식 안에 있는 특정 절에 대한 검색을 여러 번 수행할 수 있습니다. 반복 매칭에서는 어떤 요소가 정규 표현식 안에서 몇 번 반복될 것인지를 지정할 수 있습니다.

기호 기능
{x} {x} 정규 표현식을 x번 비교합니다.

"d{5}"는 5개의 숫자를 비교합니다.
(x,} 정규 표현식을 x번 이상 비교합니다.

"s{2,}"는 최소한 두 개의 공백 문자를 비교합니다
{x,y} 정규 표현식을 x부터 y번까지 비교합니다.

"d{2,3}"는 2개 이상 3개 미만의 숫자를 비교합니다. .
? 0번 또는 한 번 비교합니다. {0,1}와 동일함.

"as?b"는 "ab" 또는 "a b"를 비교합니다.
* 0번 이상 비교합니다. {0,}와 동일함.
+ 한번 이상 비교합니다.{1,}과 동일함.

교체와 그룹핑

교체와 그룹핑은 보다 복잡한 정규 표현식을 만들 때 사용합니다. 교체와 그룹핑 기술은 정규 표현식 안에 복잡한 절을 만들고, 보다 많은 융통성과 제어 능력을 제공합니다.

기호 기능
() 절을 그룹핑하여 절을 만듭니다. 중첩하여 사용할 수도 있습니다.

"(ab)?(c)"는 "abc" 또는 "c"를 비교합니다.
| 교체는 여러 절을 하나의 정규 표현식으로 조합한 다음 개별적인 절을 비교합니다.

"(ab)|(cd)|(ef)"는 "ab" 또는 "cd" 또는 "ef"를 비교합니다.

역방향 참조

프로그래머는 역방향 참조를 통해 정규 표현식의 일부를 다시 참조할 수 있습니다. 그 방법은 괄호와 백슬레시() 뒤에 한 개의 숫자를 사용하는 것입니다. 첫 번째 괄호 절은 1로 참조되고 두 번째 괄호 절은 2로 참조되는 식입니다.

기호 기능
()n 왼쪽 괄호에 있는 표현식을 n번 반복해서 문장을 비교합니다.

"(w+)s+1"는 "hubba hubba" 같이, 한 열 안에서 두 번 나타나는 임의의 워드를 비교합니다.."

예제로 확인하기!
이 예제는 지금까지 설명한 것을 적용한 것으로, 정규 표현식을 이용하여 유효한 입력 값이 입력되어 있는지 검사하는 간단한 응용 프로그램입니다. 사용자가 유효한 값을 입력할 때까지 사용자에게 입력을 요구하는 프롬프트가 반복적으로 나타납니다. 먼저 초기 패턴을 자세히 설명하겠습니다.

"^s*(($s?)|(£s?))?((d+(.(dd)?)?)|(.dd))s*(UK|GBP|GB|USA|US|USD)?)s*$"

"^s*…" 와 "…s*$" - 앞과 뒤에 몇 개의 공백 문자든지 올 수 있음을 나타내며, 입력은 반드시 라인 자체 위에 있어야 합니다.
"(($s?)|(?s?))?" - 옵션 공백 앞에 오는 옵션 $ 또는 ￡ 기호를 나타냅니다..
"((d+(.(dd)?)?)|(.dd))" - 생략 가능한 십진수 소수점 2자리 또는 십진수 소수점 2 자리수 앞에 오는 한 자리 이상의 숫자를 찾습니다. 이 말은 6., 23.33, .88와 같은 숫자는 사용 가능하나 5.5는 사용할 수 없음을 의미합니다.
"s*(UK|GBP|GB|USA|US|USD)?" - 문자열에 대하여 생략 및 사용이 가능하고 인수 앞에서 유효한 공백 문자의 수를 의미합니다.
본 예제의 경우, 정규 표현식은 사용자의 US 달러 또는 영국 파운드 입력 여부를 결정하는 데 사용됩니다. 필자는 ￡, UK, GBP, 또는 GB 문자열을 검색하고 있습니다. 정규 표현식 결과가 참이면 사용자는 영국 파운드 단위의 액수를 입력한 것이라고 보면 됩니다. 그렇지 않다면 USD 통화를 사용한 것이겠지요.

이 코드를 사용하려면 코드를 CurrencyEx.vbs로 저장하고 Windows Script Host를 이용해 코드를 실행시킨 다음 VB에 복사하거나(이 경우, Microsoft VBScript 정규 표현식에 참조를 추가할 필요가 있음) HTML 파일에 코드를 포함시킵니다.

Sub CurrencyEx
Dim inputstr, re, amt
Set re = new regexp 'Create the RegExp object

'Ask the user for the appropriate information
inputstr = inputbox("I will help you convert USA and CAN currency. Please enter the amount to convert:")
'Check to see if the input string is a valid one.
re.Pattern = "^s*(($s?)|(£s?))?((d+(.(dd)?)?)|(.dd))s*(UK|GBP|GB|USA|US|USD)?)s*$"
re.IgnoreCase = true
do while re.Test(inputstr) <> true
'Prompt for another input if inputstr is not valid
inputstr = inputbox("I will help you convert USA and GBP currency. Please enter the amount to(USD or GBP):")

loop
'Determine if we are going from GBP->US or USA->GBP
re.Pattern = "£|UK|GBP|GB"
if re.Test(inputstr) then
'The user wants to go from GBP->USD

re.Pattern = "[a-z$£ ]"
re.Global = True
amt = re.Replace(inputstr, "")
amt = amt * 1.6368
amt = cdbl(cint(amt * 100) / 100)
amt = "$" & amt
else
'The user wants to go from USD->GBP

re.Pattern = "[a-z$£ ]"
re.Global = True
amt = re.Replace(inputstr, "")
amt = amt * 0.609
amt = cdbl(cint(amt * 100) / 100)
amt = "£" & amt
end if

msgbox ("Your amount of: " & vbTab & inputstr & vbCrLf & "is equal to: " & vbTab & amt)
End sub

더욱 강력한 파워를!
Visual Basic 개발자들이 정규 표현식을 사용할 수 있도록 VBScript 정규 표현식 엔진은 COM 개체로 구현되어 왔습니다. 이 경우, 정규 표현식은 보다 강력한 힘을 발휘하게 되는데 즉, Visual Basic 또는 C와 같은 VBScript 외의 다양한 소스로부터 호출이 가능하기 때문입니다. 예컨대, 필자는 Outlook(R) 97, Outlook 98 또는 Outlook 2000의 접속 목록을 통해 내용을 추적하고 특정 도시에 사는 접속자 이름을 반환하는 작은 Visual Basic 응용 프로그램을 만든 경험이 있습니다.

이 프로그램은 매우 간단합니다. 먼저 사용자는 검색할 대상 도시명을 입력하고, 구분 표시에는 쉼표를 사용합니다. 그런 다음, Outlook에 작성할 새 접속 폴더의 이름을 입력합니다. 각 접속이 일치하면 이 내용은 새로 작성된 접속 폴더에 복사됩니다.

Microsoft VBScript 정규 표현식 개체 라이브러리에 참조를 추가할 경우 몇 가지 유용한 조기 바인딩 기능(early binding)을 사용할 수 있습니다. 이 조기 바인딩 개체는 몇 가지 이점을 제공하는데 즉, 속도가 빠르고 코딩 프로그램 사용이 간편하다는 점입니다. "new RegExp"가 즉시 사용되므로 사용자는 개체에 참조를 추가하고 VBScript코드를 오려내어 VB에 그대로 붙일 수 있습니다.

이러한 이유로 필자 또한 정규 표현식과 동일한 방법을 사용하여 Outlook 9.0 개체 라이브러리를 참조한 적이 있습니다. 물론, 여러분은 여전히 CreateObject() (을)를 사용하여 COM 호출을 생성시킬 수도 있으나 상기 방법을 더 간편하게 사용할 수 있을 것입니다. 이 개체들을 작성한 후 간단한 코드를 사용하여 도시명과 일치하는 폴더와 트리를 액세스할 수 있습니다. 본인은 2개의 모음 개체를 가지는 작은 도움 함수 compareCollectionObjects(x,y)(을)를 사용/비교하여 일치 여부를 확인합니다.

이 프로그램을 사용하려면 단순히 코드를 VB(참조 추가에 필요함)에 복사한 다음 FindCityContacts() 함수를 호출하면 됩니다. .

Sub FindCityContacts()

Dim strTemp
Dim index
Dim citySearch
Dim myNameSpace, myContacts, newCityContacts, newCityContactsName
Dim contact
Dim newContact

'Set the early binding objects
Dim re as New RegExp
Dim myApp as New Outlook.Application

re.Global = True
re.IgnoreCase = True

citySearch = InputBox("Please enter the cities of your search, separated by commas.")
newCityContactsName = InputBox("Please enter the new contact folder name")

'Set some of the objects and create the new Contacts folder
Set myNameSpace = myApp.GetNamespace("MAPI")
'olFolderContacts = 10
Set myContacts = myNameSpace.GetDefaultFolder(10)
Set newCityContacts = myContacts.Folders.Add(newCityContactsName)

'Set cities, using regular expressions to contain the city names
re.Pattern = "[^,]+"
Set cities = re.Execute(citySearch)
For Each city In cities

'Set citytokens to be the individual tokens in the city name
'Then we compare them to the address tokens in each contact
re.Pattern = "[^ ]+"
Set citytokens = re.Execute(city)

For i = 1 to myContacts.Items.Count
re.Pattern = "[^ ]+"
Set contact = myContacts.Items.Item(i)

Set HomeAddressCityTokens = re.Execute(contact.HomeAddressCity)
If compareCollectionObjects(HomeAddressCityTokens, citytokens) = 1 Then

Set newContact = contact.Copy
newContact.Move newCityContacts
End If

Set OtherAddressCityTokens = re.Execute(contact.OtherAddressCity)
If compareCollectionObjects(OtherAddressCityTokens, citytokens) = 1 Then
Set newContact = contact.Copy
newContact.Move newCityContacts
End If

Set BusinessAddressCityTokens = re.Execute(contact.BusinessAddressCity)
If compareCollectionObjects(BusinessAddressCityTokens, citytokens) = 1 Then
Set newContact = contact.Copy
newContact.Move newCityContacts
End If
Next
Next

MsgBox "done"

End Sub

'This function is provided as a helper-function
' to compare two collection objects.
Function compareCollectionObjects(x, y)

Dim index
Dim flag
flag = 1

If x.Count <> y.Count Then
flag = 0
Else
index = x.Count

For i = 0 To (index - 1)
If StrComp(x.Item(i), y.Item(i), 1) Then
flag = 0
End If
Next
End If

compareCollectionObjects = flag

End Function

넘치는 정보!
앞에서 보았듯이, Microsoft는 정규 표현식(버전 5.0)을 이용하여 VBSscript를 강화시키는데, 이것은 VBScript와 Jscript 비교에서 가장 중요한 부분이었습니다. 스크립팅 엔진 버전 5.0에서 우리는 VBScript의 기능을 향상시키는 데 특히 비중을 두었습니다. 이제 여러분은 정규 표현식을 추가시킴으로써 데이터를 보다 확실하게 관리하고 그 효과를 높일 수 있게 되었으며, 클라이언트와 서버에서 보다 강력한 웹 응용 프로그램을 만들 수 있게 되었습니다.

출처 : http://blog.empas.com/woo4761/9330195

[출처] 정규식 기초|작성자 열린문서

AND

정규 표현식

Javascript 궁금하니? 2009. 11. 10. 17:04

출처: http://blog.naver.com/nondureng1?Redirect=Log&logNo=10045714869

정규 표현식: 문자들의 패턴을 기술하는 객체

정규표현식 리터럴은 문자들을 한쌍의 슬래시(/) 안에 작성

ex) var pattern =/s$/;

정규표현식 리터럴 문자

\0 널문자

\t 탬문자

\n 줄바꿈

\v 수직탭

\f 폼피드

\r 캐리지리턴

역슬래시 사용

\ 사용 ==> /\\/

정표 표현식 문자 클래스

[...] 대괄호 안에 있는 문자

[^...] 대괄호 안에 없는 문자

. 줄바꿈이나 unicode 줄마침 문자를 제외한 아무 문자

\w ASCII 문자([a-zA-Z0-9_] 와 동일

\W ASCII 문자 아닌 문자[^a-Z0-9_] 와 동일

\s unicode 공백문자

\S unicode 공백 문자가 아닌 문자(\w 와 \S 다름)

\d ASCII 숫자([0-9]와 동일)

\D ASCII 숫자가 아닌 문자 [^0-9] 와 동일

[\b] 백스페이스

정규 표현식 반복 문자

{n,m} 앞의 항목이 적어도 n번 이상 나타나고 m번보다는 적게 나타 난다

{n,} 앞의 항목이 n번 이상 나타난다.

{n} 앞의 항목이 정확히 n번 나타 난다.

? 앞의 항목이 0 또는 한번 나타 난다. 즉 앞의 항목이 생략할수 있음 {0,1} 동일

+ 앞의 항목이 한번 이상 나타남 {1,} 동일

* 앞의 항목이 0번 이상 나타남 {0,} 동일

ex) /\d{2,4}/ ==> 2에서 4자리 사이의 숫자와 매치

/\w{3}\d?/ ==> 정확히 세 문자와 매치되고, 생략 가능한 숫자가 하나 있음

/\s+java\s+/ ==> 앞뒤에 하나 이상의 공백이 있는 java 와 매치

/[^"]*/ ==> 0개 이상의 따옴표가 아닌 문자와 매치

반복 규제

? 사용

ex) /a+?/ 이 정규식은 "aaa" 에 적용 되면 첫 번째 a에만 매치

대체와 그룹화, 참조

| 대체,왼쪽이나 오른쪽의 부분 표현식을 매치

(...) 그룸화,운소들을 *,+,?,| 등과 함께 사용할 수 있게 단일 원소로 그룹화

(?...) 단지 그룹화만을 위한 것, 원소들을 단일 원소로 그룹화하지만 이 그룹에 매치되는 문자들을 기억할 필요 없음

\n 그룹 번호 n이 처음 매치되었을 때의 문자를 사용하여 매치시킨다. 그룹은(중첩될 수도 있는) 괄호로 묶인 부분 표현식

그룹 번호는 왼쪽 괄호를 왼쪽에서 오른쪽으로 세어서 정한다.'.+' 로 만들어진 그룹은 번호를 지정 하지 않음

ex) /\d{3}|[a-z]{4}/ 세 자리 숫자나 네 개의 소문자 매치

==> 대체 표현식은 매치 되는 것을 찾을 때까지 왼쪽에서 오른쪽으로 검사

왼쪽에 있는 대체 표현식이 매치되면 오른족에 있는 표현식이 더 잘 매치되더라도 무시 됨

/java(script)?/ 생략 가능한 문자열인 script 가 뒤 따라 오는 "java" 매치

/(ab|cd)+|ef)/ 문자열 "ef"에 매치 되거나 문자열 "ab" 혹은 "cd"가 한번 이상 반복

정규 표현식 맹커 문자

^ 문자열의 시작 부분이나, 여러 라인을 찾는 경우에는 줄의 시작 부분 매치

$ 문자열의 끝 부분이나, 여러 줄을 찾는 경우에는 줄의 끝 부분에 매치

\b 단어 경계에 매치된다. 즉\w와 \W문자나 \w 문자열의 시작이나 끝부분의 위치와 매치

([\b]는 백스페이스와 매치)

\B 단어 경계가 아닌 곳에 매치

(?=p) 긍정적 뒤보기 시ㅓㄴ언, 이후에 나올 문자드이 패턴 p에매치되어야 하지만 매치 결과에는 나타 나지 않음

(?!p) 부정적 뒤보기 선언, 이후에 나올 문자들이 패턴 p에 매치되어서는 안됨

ex) /^JavaScript$/ ==> "JavaScript" 라는 단어 자체가 한 줄인 것

/\B[Ss]cript/ ==>"JavaScript", "postscript" 에 매치 "script" "Scripting" 매치 안됨

/[Jj]ava([Ss]cript)?(?=\:)/ "JavaScript: The Definitive' 매치

/Java(?!Script0([A-Z])\w*)/ Java 뒤에 "Script" 가 없는 한 뒤에 대문자와 임의의 수의 ASCII 문자 매치

JavaBeans 매치

정규 표현식 플래그

i 대소문자를 구별하지 않는 매칭

g 전역 매칭을 수행 즉 첫 번재 매치에서 끝내지 않고 매치되는 모든 것을 찾음

m 여러 줄 상태 ,^는 줄의 시작이나 문자열의 시작에 매치되고, $는 줄의 끝이나 문자열의 끝에 매치됨

ex) /\bjava\b/gi 대소문자를 구별하지 안고 이단어의 모든 출현 찾기

"JavaScript".search(/script/i); ==>가장 처음 매칭 되는 부분 문자열의 위치 매칭 되는 부분 문자열이 없다면 -1

var url= /(\w+):\/\/([\w.]+)\/(\S*)/;
var text="Visit my blog at http://www.example.com/~david";
var result=text.match(url);

if(result != null){

var fullurl =result[0]; // http://www.example.com/~david
var protocol=result[1]; //http
var host=result[2]; //www.example.com/~david
var path=result[3]; //~david

}

var text3="1, 2, 3, 4, 5".split(/\s*,\s*/); ==> ["1","2,","3","4","5"]

/match() 메서드와 다르게 exec() 메서드는 정규 표현식에 전역 g 플래그의 존재 여부 상관없이 같은 종류의 배열

반환

var patternex =/Java/g;

var textex="JavaScript is more fun than Java!";
var resultex;

while((resultex = patternex.exec(textex)) != null){
alert("Matched ' " + resultex[0] + " ' " +
" at position " + resultex.index + // 매치가 일어난 문자의 위치
"; next search bgein at " +patternex.lastIndex); // 다로 다음 나오는 문자의 위치
}

AND

구글크롬 테스트 및 브라우저버전체크 스크립트

Javascript 궁금하니? 2009. 11. 10. 15:21

출처: http://techbug.tistory.com/123

브라우저 춘추전국시대 다시 시작하나....

오늘 구글크롬이 다운로드 서비스를 시작했다.
설치후 구글 크롬 이놈은 다른 브라우저의 종합판인듯하다.

Opera,Firefox, Safari 모두다 섞어 놓은것 같은데.. ㅡ.,ㅡ; 상상력이... 쿨럭!!.

각 브라우저의 값들을 비교해보고자
alert(navigator.userAgent+"\n=>"+parseFloat(navigator.appVersion));로 찍어봤다.

구글크롬 0.2
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13:
=>Netscape

사파리 3.1.2
Mozilla/5.0 (Windows; U; Windows NT 6.0; ko-KR) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.1.2 Safari/525.21:
=>Netscape

Firefox 3
Mozilla/5.0 (Windows; U; Windows NT 6.0; ko; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1:
=>5

IE7
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506):
=>4

Opera 9.52
Opera/9.52 (Windows NT 6.0; U; ko):
=>Opera

헉.. 이놈 대단한 놈이다.. safari의 AppleWebkit으로도 유효성검증을 하기가.. ㅠ.,ㅠ;
결국은 다음과 같이 버전체크 부분을 몽땅 바꿔버렸다.

/**
* @fileoverview 브라우저비교 및 JS상속, 클래스 생성관련 스크립트 모음
* @author 데꾸벅
* @version 0.1
* @since 2003.05.08, 2008.08.27 IE6 판별 버그 수정, 2008.09.03 Google Chrome 판별 추가
*/

var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

/**
* 브라우저 버전 비교
*/
function compareVersions(sVersion1, sVersion2) {
var aVersion1 = sVersion1.split(".");
var aVersion2 = sVersion2.split(".");

if (aVersion1.length > aVersion2.length) {
for (var i=0; i < aVersion1.length - aVersion2.length; i++) {
aVersion2.push("0");
}
} else if (aVersion1.length < aVersion2.length) {
for (var i=0; i < aVersion2.length - aVersion1.length; i++) {
aVersion1.push("0");
}
}
for (var i=0; i < aVersion1.length; i++) {
if (aVersion1[i] < aVersion2[i]) {
return -1;
} else if (aVersion1[i] > aVersion2[i]) {
return 1;
}
}
return 0;
}

//Opera
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isOpera7 = isOpera8 = isOpera9 =isOpera10 = false;
if (isOpera) {
if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var oprversion=new Number(RegExp.$1);
if (oprversion>=10) isOpera10 = true;
else if (oprversion>=9) isOpera9 = true;
else if (oprversion>=8) isOpera8 = true;
else if (oprversion>=7) isOpera7 = true;
}
}

//KHTML, Konqueror
var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;

var isSafari1 = isSafari1_2 = false;
var isKonq2_2 = isKonq3 = isKonq3_1 = isKonq3_2 = false;
var isSafari = false;
if (isKHTML) {
isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
isKonq = sUserAgent.indexOf("Konqueror") > -1;

if (isSafari) {
var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
reAppleWebKit.test(sUserAgent);
var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
isSafari1 = fAppleWebKitVersion >= 85;
isSafari1_2 = fAppleWebKitVersion >= 124;
} else if (isKonq) {
var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
reKonq.test(sUserAgent);
isKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
isKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
isKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
isKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
}
}

// Internet Explorer
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
var isIE4 = isIE5 = isIE5_5 = isIE6 = isIE7 = isIE8 = false;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(sUserAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
isIE4 = fIEVersion >= 4 && fIEVersion < 5;
isIE5 = fIEVersion >= 5 && fIEVersion < 5.5;
isIE5_5 = fIEVersion >= 5.5 && fIEVersion < 6.0;
isIE6 = fIEVersion >= 6.0 && fIEVersion < 7.0;
isIE7 = fIEVersion >= 7.0 && fIEVersion < 8.0;
isIE8 = fIEVersion >= 8.0 ;
}

// Mozilla 여부
var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
var isMoz1 = sMoz1_4 = isMoz1_5 = false;

if (isMoz) {
var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
reMoz.test(sUserAgent);
isMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
isMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
isMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}

var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape") && (fAppVersion >= 4.0 && fAppVersion < 5.0);
var isNS4 = isNS4_5 = isNS4_7 = isNS4_8 = false;

if (isNS4) {
isNS4 = true;
isNS4_5 = fAppVersion >= 4.5;
isNS4_7 = fAppVersion >= 4.7;
isNS4_8 = fAppVersion >= 4.8;
}

var isFF = !isIE && !isOpera && isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape");
var isFF1 = isFF2 = isFF3 = false;
if(isFF){
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1);
if (ffversion>=3)
isFF3 = true;
else if (ffversion>=2)
isFF2 = true;
else if (ffversion>=1)
isFF1 = true;
}
}

//구글 크롬 버전체크 추가 2008.09.03
var isChrome = !isIE && !isFF && !isOpera && !isMoz && !isKonq && isSafari && isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (sUserAgent.indexOf("Chrome") != -1) && (navigator.appName == "Netscape");
var isChrome02 = false;

if(isChrome){
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1);
if(parseFloat(ffversion) >= parseFloat('0.2'))
isChrome02 = true;
}
}

/**
* XP인지 아닌지 판별함수
* @return {boolean} true/false
*/
function isXP(){
var agent = window.navigator.userAgent;
if(agent.indexOf("MSIE")!= -1 && agent.indexOf("5.1") !=-1)
return true; //SP1
else
return false;
}

/**
* XP의 ServicePack2인지 처리함수
* @return {boolean} true/false
*/
function isXPSP2(){
var tmp_MSIE = window.navigator.userAgent.indexOf("MSIE");
if(tmp_MSIE && window.navigator.userAgent.indexOf("SV1") > tmp_MSIE){
return true; //SP2
}else{
return false;
}
}

구글크롬에서는 태터툴즈의 웹에디팅기능이 되지 않아 지금 포스팅은 FF3에서 작성하고 있다. ㅡ.,ㅡa

Acid3 Test 결과화면 : 테스트사이트 (http://acid3.acidtests.org/)

Opera9, Firefox3, IE7,
Safari, google Chrome, IE8
순서로 테스트 (Safari는 네트웍때문에 연결되지 않았으며, google Chrome의 경우 78/100 이 나왔습니다. 사파리하고 비슷한 수준이네요~~

근데... 이건 뭥미???

AND

정규식(Regular Expression) 표현 방법 및 예제

Javascript 궁금하니? 2009. 11. 10. 15:19

출처: http://kurapa.com/content-a6250

1) 객체

그럼 먼저 정규식의 객체에 대해 살펴보자. 정규식의 모든 객체를 설명하려면 너무 복잡하고 어려우므로 여기에선 일단 가장 중요한 것들만 나열한다.

(1) 문자

* 유니코드 문자 - 유니코드 문자는 문자 그대로 표현한다. 즉, a는 문자열의 a와 매치된다.
* \ (backslash) - 정규식에 사용되는 특수문자, 예를 들어 * 나 \ 등을 매치할때 사용한다. 즉, * 를 매치하려면 \* 라고 써줘야한다.
* \t - 탭 문자와 매치된다.
* \n - 새줄문자와 매치된다.
* \r - 리턴문자와 매치된다.
* \f - form feed문자와 매치된다.

예를 들어 문자열 "a\bc*"와 매칭을 하고 싶다면 정규식은 "a\\bc\*"와 같이 사용한다. \와 *가 모두 정규식에 쓰이는 특수문자들이므로 앞에 \을 붙여주고 나머지는 문자 그대로 사용한다.

(2) 문자클래스

* [a-zA-Z] - a에서 z까지, 그리고 A에서 Z사이에 있는 모든 문자와 매치된다.
* [^a-zA-Z] - 위와 반대다. 즉 a에서 z까지, A에서 Z까지 사이에 없으면 매치된다.

만약 소문자와 매치하려면 [a-z]를 사용하거나 [^A-Z]를 사용하면 된다. 숫자도 마찬가지다. [0-9]를 사용하면 숫자와 매치되고 숫자가 아닌 것과 매치하려면 [^0-9]를 사용하면 된다.

(3) 사전에 정의된 클래스

* . - 새줄문자 이외의 모든것
* \w - 알파벳과 _ (영어단어에 쓰이는 문자)
* \W - 알파벳과 _이 아닌 것
* \s - 빈 공간
* \S - 빈 공간이 아닌 것
* \d - 숫자
* \D - 숫자가 아닌 것

예를 들어 "1a 2a" 또는 "3g 9i" 등의 문자열과 매치하고 싶을 땐 "\d\S\s\d\S"와 같이 정규식을 써주면 된다.

(4) 단어나 줄의 경계를 매치할때

* ^ - 줄의 맨앞과 매치된다.
* $ - 줄의 맨끝과 매치된다.
* \b - 단어와 단어의 경계와 매치된다.

예를 들어 한 줄에 "aaaaa"라는 문자열만 있는 줄을 매치하고 싶으면 "^aaaaa$"와 같이 정규식을 써주면 된다. 만약 다른 문자열 속에 포함돼있는 "aaaaa"를 매치하고 싶다면 (예를 들어 "bbbbbaaaaabbbbb") 그냥 "aaaaa"만 해줘야 매치가 된다.

(5) 그 이외의 것들

* A|B - A 또는 B와 매치된다.
* (A) - A와 매치한것을 나중에 다시 사용할 때 쓴다.

어떤 문자열에서 매치한 부분을 나중에 다시 사용하고 싶을 때는 괄호를 사용한다. 예를 들어 사용자가 입력한 전화번호를 정규식을 사용하여 패턴매칭을 했다고 하자. 이렇게 매치된 전화번호를 데이터베이스에 저장하고 싶을 때 바로 정규식 안에서 괄호를 이용하여 매칭을 한다. 괄호 안에 매칭된 부분은 나중에 다시 사용하는 것이 가능하기 때문이다. 이것은 굉장히 중요하므로 나중에 예제로 다시 설명하겠다.

(6) 매치된 객체의 재사용

* \1 - 첫번째 괄호에 매치된 부분
* \2 - 두번째 괄호에 매치된 부분
* 세번째는 $3, 네번째는 $4 등으로 사용하면 됨

정규식 안에서 괄호에 매치된 부분을 다시 사용하고 싶을 때 쓰는 객체들이다. 예를 들어 "1 - 1" 처럼 처음과 나중의 숫자가 같은 문자열만 매칭하고 싶을 경우, "(\d+) \- \1"과 같은 정규식을 사용하면 간단하게 매칭할 수 있다. 여기서 \1 은 그 앞에서 \d+ 로 매치된 숫자를 가리킨다.

(7) 수량

수량은 각 객체가 문자열 안에서 몇 번이나 나타나는지 그 회수를 정해준다. 아마 많은 독자들이 윗부분을 보면서 정규식은 문자를 한 번에 한 개밖에 매치하지 못하나 하고 의문을 품을지 모르겠다. 그러나, 바로 밑에 나열한 것들로 수량을 정해줄 수 있다. 일단 그것들을 보고 예제를 통해서 사용 방법을 살펴보자.

* A* - A를 0번, 아니면 그 이상 매치한다.
* A+ - A를 한번, 아니면 그 이상 매치한다.
* A? - A를 0번, 아니면 한번만 매치한다.
* A{n} - A를 정확히 n번 매치한다.
* A{n,} - A를 n번 이상 매치한다.
* A{n,m} - A를 최소한 n번, 하지만 m번 이하로 매치한다.

2) 정규식 예제

지금까지 나열한 모든 객체들을 예제를 통해서 자세히 알아보도록 하자. 만약 전화번호를 매치하고 싶다면 어떻게 해야할까? 일단 전화번호는 지역번호가 있을수도, 없을수도 있다. 사람마다 지역번호를 괄호에 넣거나, 아니면 그냥 국번과 -로 구별하기도 한다. 그럼 그것에 맞는 정규식은 어떻게 써야할까? 일단 지역번호를 매치해보자. 지역번호는 세자리 숫자이므로

\d{3}

으로 하면 매치가 된다. 물론 너무 엄격하게 하고 싶지 않으면

\d+

로 해도 된다. 그렇다면 괄호의 있고 없고 여부는 어떻게 해야할까? 여기에선 ?나 *를 쓰면 해결할 수 있다. 즉,

$?\d{3}$?

을 쓰면 지역번호와 패턴매칭을 할 수 있다. 전화번호의 나머지도 간단하다.

\d{3,4}\-?\d{4}

로 하면 간단히 매치된다. 국번은 세자리, 또는 네자리지만 번호는 네자리밖에 없다. 요약하면 전화번호를 매치하기 위해선

$?\d{3}$?\-?\d{3,4}\-?\d{4}

와 같은 정규식이 필요하다. 그럼 위의 정규식을 써서 전화번호를 찾아냈다고 하자. 하지만 그 전화번호가 무엇인지 어떻게 알 수 있을까? 문자열을 그대로 다시 출력하면 매칭한 부분뿐만 아니라 다른 부분들까지 출력하게 된다. 여기서 매치된 부분만 다시 사용하기 위해 괄호를 사용하면 된다. 예를 들어, 위의 전화번호를 지역번호와 국번, 그리고 번호의 세 부분으로 나눠서 재사용 해보기로 하자. 그렇다면 다음처럼 각 부분에 괄호를 사용하면 된다.

$?(\d{3})$?\-?(\d{3,4})\-?(\d{4})

처음보단 훨씬 복잡하게 보이지만 객체 하나하나를 풀어서 보면 쉽게 알 수 있다. 만약 전화번호가 123-456-7890 이였다면 첫번째 괄호는 123, 두번째 괄호는 456, 그리고 마지막 괄호는 7890과 매치하게 된다. 이제 매치된 부분을 재사용하려면 Regexp 패키지의 getParen()이라는 함수를 사용하면 된다. 즉, getParen(1)은 123을, getParen(2)는 456을, 그리고 getParen(3)은 7890을 돌려준다. 이것은 클래스 사용방법에 더 자세히 설명돼 있으므로 패키지 사용방법 문서를 읽어주기 바란다.

그럼 여기서 연습을 한 번 해보자. 만약 주민등록번호를 매치하고 싶다면 어떤 정규식을 써야할까? 이건 독자 여러분이 각자 해보기 바란다. 정답은 이 문서 맨 밑에 있다.

여기서 한 가지 짚고 넘어가야 할 것은 정규식엔 한 가지의 정답이란 없다는 것이다. 개발자가 원하는 결과가 제대로 나오도록만 정의해주면 된다는 것이다. 예를 들어 앞의 전화번호의 예제를 보자. 국번의 경우 \d{3} 도 가능했고 \d+ 도 가능했다. 개발자가 원하는 것을 사용하면 된다.

출처: http://kurapa.com

AND

JavaScript의 이런 점이 뒤통수를 때리더라.

Javascript 궁금하니? 2009. 10. 14. 14:34

출처: http://appletree.or.kr/blog/web-development/javascript/javascript%EC%9D%98-%EC%9D%B4%EB%9F%B0-%EC%A0%90%EC%9D%B4-%EB%92%A4%ED%86%B5%EC%88%98%EB%A5%BC-%EB%95%8C%EB%A6%AC%EB%8D%94%EB%9D%BC/

비록 현재 왕성한 액션 히어로의 역할로 웹의 커다란 한 부분을 담당하고 있는 JavaScript라도 그 결점은 있기 마련이고, 언젠가는 이러한 언어 설계상의 오류가 자기의 뒤통수를 때릴 때가 있을 것이다. 결국, 미리 알아서 조심해야지.

JavaScript에서 NaN 값은 not a number라는 뜻으로, 즉 숫자가 아니라는 의미이다. 하지만,

typeof NaN === 'number'    // true

이렇듯, typeof로는 NaN와 숫자를 구분할 수가 없거니와, 자신과의 비교도 불허한다.

NaN === NaN    // false
NaN !== NaN    // true

결국, JavaScript에서는 숫자와 NaN를 구분하는 isNaN라는 함수를 제공하고 있다:

isNaN(NaN)       // true
isNaN(0)         // false
isNaN('oops')    // true
isNaN('0')       // false

결국, 숫자를 구별하는 가장 확실한 방법으로 다음과 같은 함수가 쓰일 수 있겠다:

function isNumber(value) {
    return typeof value === 'number' && isFinite(value);
}

typeof 얘기가 나와서 그러는데,

typeof null     // object

null 대신에 object를 돌려받는다. 그래서, null 값을 알아보기 위한 가장 좋은 방법은 아래와 같다:

my_value === null

또한, JavaScript의 Reserved Words는 보통 변수 이름으로 사용될 수 없는데, 굳이 reserved words를 object literals의 키 값으로 사용하려 할 경우에는, 항상 따옴표도 함께 써줘야 하고 dot notation 대신에 bracket notation을 사용해야 한다:

var method;                // ok
var class;                 // illegal
object = {box: value};     // ok
object = {case: value};    // illegal
object = {'case': value};  // ok
object.box = value;        // ok
object.case = value;       // illegal
object['case'] = value;    // ok

JavaScript는 프로그램 상 오류를 자동 수정하려는 성질이 있어서 문단 마지막에 항상 semicolons을 삽입하는데, 이것이 오히려 아래처럼 뜻하지 않는 문제를 일으킬 수도 있다.

return
{
    status: true
};

return 뒤에 바로 semicolon이 붙어버리면서 결국, undefined 값을 돌려주게 된다. 그래서 { 는 항상 아래처럼 앞 줄의 맨 마지막에 붙여주는 스타일을 손에 익혀야 한다.

return {
    status: true
};

그리고 string을 integer로 바꾸어주는 parseInt 함수를 사용할 때는 항상 radix 매개 변수를 사용하는 버릇을 들여서, 아래와 같이 뜻하지 않는 결과를 초래하는 일을 미연에 방지한다.

parseInt("08")      // 0
parseInt("09")      // 0
parseInt("08", 10)  // 8

또 하나, JavaScript의 소수점 계산은 형편없는 것으로 악명높다:

alert(0.1 + 0.2); // 0.30000000000000004

이것은 JavaScript만의 문제가 아니라, Binary Floating-Point Arithmetic(IEEE 754)을 채용한 언어들에서 공통적으로 나타나는 문제점으로, ECMAScript 4에서는 Real Decimals의 채용하면서 이를 극복할 수 있는 문제지만, 당분간은 미리 scaling 해서 이 문제를 피할 수 밖에.

다음은 JavaScript에서 사용되는 여러가지 "falsy" 값들이다:
0(Number), NaN(Number), "(String), false(Boolean), null(Object), undefined(Undefined).

모두 "falsy" 값을 가지지만 번갈아 서로 혼용되서 사용될 수는 없어서, 예를 들어 null 값을 구하는데, undefined를 대신 사용하면 잘 못된 결과를 얻게 된다. 이 얘기는 자동 타입 변환(type coercion)을 일으키는 == 연산자 대신에 더 염격한 === 연산자를 사용하라는 얘기와 맞닿아 있다.

이 외에도, 실수든 혹은 필요에 의해서든 상호 운용성을 떨어뜨리는 global variables의 남용 등, JavaScript 문법 검사기인 JSLint를 한번 돌려 본 사람이라면 많은 골칫거리를 떠안게 된다. 하지만, 대부분의 골 때리는 일들은 잘못된 습관에서 비롯되는 경우가 많으므로 평소에 많은 코드를 접하면서 좋은 습관을 들이도록 노력하는 것이 중요할 것이다.

꼬리표: JSLint, 자바스크립트

AND

BLOG ARTICLE Javascript 궁금하니? | 25 ARTICLE FOUND

collection 과 nodelist 차이

Intro to JavaScript Events

정규표현식 #002

자바스크립트 정규표현식(JavaScript Regular Expression)

정규표현식 #001

navigationMode opera

navigationMode property (history)

Syntax:

Possible values:

Example 1:

정규식 기초

정규식 구문

정규 표현식

구글크롬 테스트 및 브라우저버전체크 스크립트

정규식(Regular Expression) 표현 방법 및 예제

JavaScript의 이런 점이 뒤통수를 때리더라.

ARTICLE CATEGORY

ARCHIVE & SEARCH

CALENDAR

RECENT ARTICLE

TAG CLOUD

RECENT COMMENT

MY LINK

COUNTER

티스토리툴바