'It's Mine' 카테고리의 다른 글
XML Team(Schema)! about 10 years ago. (0) | 2010.12.16 |
---|---|
Use Case Diagram - Midas Wiki 저장용 (0) | 2010.12.16 |
정규 표현식(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;
}
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
가상 클래스와 가상 요소 (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
:active
적용대상 : 활성화된 요소
예제 :
*:active {background: blue;}
생성결과 : 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
p:after {content: " | ";}
생성결과 : 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :
p:before {content: attr(class);}
적용대상 : 특정 요소의 첫 번째 자식인 요소
예제 :
p:first-child {font-size: 125%;}
적용대상 : 요소의 첫 번째 글자를 가지고 있는 가상 요소
예제 :
a:first-letter {text-decoration: line-through;}
적용대상 : 요소의 첫 줄을 가지고 있는 가상 요소
예제 :
적용대상 : 포커스를 가진 요소
예제 :
input:focus {background: yellow;}
적용대상 : 머무르는 상태인 요소
예제 :
p:hover {background: yellow;}
적용대상 : 언어 인코딩 정보와 연관된 요소
예제 :
*:lang(fr) {quotes: '<< ' ' >>';}
적용대상 : 아직 방문하지 않은 링크
예제 :
*:link {text-decoration: underline;}
적용대상 : 이미 방문한 링크
예제 :
*:visited {color: gray;}
'Develop > CLIENT SIDE' 카테고리의 다른 글
Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
---|---|
CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
정규 표현식 (Regular Expression) (0) | 2010.12.16 |
선택자 (Selector) (0) | 2010.12.16 |
Recent Comment