블로그 이미지

Rurony's Training Gym

Rurony의 트레이닝 도장! by Rurony


웹표준 워크샵 2009


'It's Mine' 카테고리의 다른 글

XML Team(Schema)! about 10 years ago.  (0) 2010.12.16
Use Case Diagram - Midas Wiki 저장용  (0) 2010.12.16
Top

정규 표현식 (Regular Expression)


정규 표현식(Regular Expression)

자바스크립트의  정규 표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용.

 

사용하는 메소드

regexp.exec, regexp.test, string.match, string.replace, string.search, string.split 등

 

정규표현식 객체 생성

    정규 표현식 리터럴 사용

        var my_regexp = /"(?:\\.|[^\\\"])*"/g;

   

        정규 표현식 플래그

        g  : Global(여러번 일치함, 정확한 의미는 메소드에 따라 다름)
        i  : Insensitive (대소문자를 구분하지 않음)
        m  : Multiline(^과 $이 라인 끝 문자에 일치할 수 있음)

 

    RegExp 생성자 사용

        var my_regexp = new RegExp("\"(?:\\.|[^\\\\\\\"])*\"", 'g');

       

        RegExp 객체의 속성
        global  : g 플래그가 사용된 경우 true
        ignoreCase : i 플래그가 사용된 경우 true
        lastIndex : 다음 exec 실행을 위한 시작점을 나타냄. 초기값을 0
        multiline  : m 플래그가 사용된 경우 true
        source  : 정규 표현식의 소스 텍스트

 

구성 요소

^ : 문자열의 시작
$ : 문자열의 끝

 

수량자
{m, n} : m에서 n번 반복
? : 0 또는 한번 반복 {0,1}
* : 0번 이상 반복 {0,}
+ : 한번 이상 반복 {1,}

 

클래스
[-] : 범위 ex) [a-z]
[^] : 부정(제외) ex) [^?#] : '?', '#'를 제외한 모든 문자

이스케이프 (\)
\d : 숫자문자 [0-9]와 동일
\D : 숫자문자 아님 [^0-9]와 동일
\s : 공백문자
\S : 공백문자 아님

...

 

선택

| : ex) "into".match(/in|int)

 

그룹

\1,\2,... 의 표현으로 그룹에 대한 참조가능

캡처 : '()'로 묶인 정규 표현식 선택

비캡처 : '(?:)'

긍정형 룩어헤드 : '(?=)' [좋은점 아님]

부정형 룩어헤드 : '(?!)' [좋은점 아님]

 

사용 예제

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
}
var strTest = '   abcd     efgh   ';
document.writeln(strTest.trim());  //abcd     efgh

 

var isEmail = function (str) {
    var emailEx1 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z]+/;
    var emailEx2 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;
    var emailEx3 = /[A-Za-z0-9_\-]@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;
 
    if (emailEx1.test(str)) { return true; }
    if (emailEx2.test(str)) { return true; }
    if (emailEx3.test(str)) { return true; }
 
    return false;
}

 

Top

가상 클래스와 가상 요소


:active
요소가 활성화된 경우에 적용된다. 가장 일반적인 경우는 HTML문서에서 텍스트의 링크를 클릭하는 경우인데, 링크를 클릭하여 마우스 버튼을 누르고 있는 동안이 활성화된 상태이다. 다른 요소들도 이론적으로는 활성화가 가능하지만 실제로 CSS에서는 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 활성화된 요소
예제 :
a:active {color: red;}
*:active {background: blue;}


:after
요소의 컨텐츠 끝부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
a:external:after {content: " " url(/icons/globe.gif);}
p:after {content: " | ";}


:before
요소의 컨텐츠 시작부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
a[href]:before {content: "[LINK]";}
p:before {content: attr(class);}


:first-child
특정 요소의 첫 번째 자식 요소만 선택해주는 가상 클래스이다. 예를 들어 p:first-child를 사용하면 특정 요소의 첫 번째 자식 요소인 p 요소를 선택한다. 일반적인 예상과 달리 문서요소에 있는 첫 번째 요소를 선택하는 것이 아니다. 이런 경우에는 p > *:first-child를 사용한다.

형식 : 가상 클래스
적용대상 : 특정 요소의 첫 번째 자식인 요소
예제 :
body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}


:first-letter
요소의 첫 번째 글자에 스타일을 적용한다. 첫 번째 글자 앞에 나오는 구두점도 같이 스타일이 적용된다. 일부 언어에서는 하나의 문자로 다루어져야 되는 문자조합이 있기 때문에 사용자 에이전트는 :first-letter를 전부 적용해야 한다. CSS2.1 이전에는 :first-letter가 블록 레벨 요소에만 사용이 가능했었는데 CSS2.1에서 모든 요소에 적용이 가능하도록 확장했다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 번째 글자를 가지고 있는 가상 요소
예제 :
h1:first-letter {font-size: 125%;}
a:first-letter {text-decoration: line-through;}


:first-line
요소의 텍스트에서 단어의 숫자에는 관계없이 첫 줄에 스타일을 적용한다. :first-line은 블록 레벨 요소에만 사용이 가능하다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 줄을 가지고 있는 가상 요소
예제 :
p.lead:first-line {font-weight: bold;}


:focus
특정 요소가 포커스를 가지고 있는 동안 적용된다. HTML에서 텍스트 입력상자에 입력 커서가 생겨있는 경우, 즉 사용자가 글자를 입력하기 시작할 때를 의미한다. 링크 요소와 같은 다른 요소에도 포커스가 생길 수 있지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 포커스를 가진 요소
예제 :
a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}


:hover
요소가 머무르는 상태인 경우, 즉 사용자가 요소를 활성화하지 않은 상태로 지정하는 경우에 적용된다. 일반적인 예로는 HTML에서 링크위로 마우스를 이동시키는 경우이다. 다른 요소에도 머무르는 상태가 가능하지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 머무르는 상태인 요소
예제 :
a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}


:lang
언어의 인코딩을 선택한다. 언어 정보는 CSS에서 지정되지 못하고, 문서 내에 지정되거나 문서와 연관되어 있어야 한다. :lang는 언어 속성 선택자와 같다.

형식 : 가상 클래스
적용대상 : 언어 인코딩 정보와 연관된 요소
예제 :
html:lang(en) {background: silver;}
*:lang(fr) {quotes: '<< ' ' >>';}


:link
아직 방문하지 않은, 즉 사용자 에이전트의 히스토리에 있지 않은 URI를 가진 링크에 적용된다. :visited 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 아직 방문하지 않은 링크
예제 :
a:link {color: blue;}
*:link {text-decoration: underline;}


:visited
이미 방문한, 즉 사용자 에이전트의 히스토리에 있는 URI를 가진 링크에 적용된다. :link 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 이미 방문한 링크
예제 :
a:visited {color: purple;}
*:visited {color: gray;}

Top

prev 1 ··· 4 5 6 7 8 next