[HTML] HTML5 이용하기 01 (170413)

HTML5  이용하기 01

• 정규표현식의 기초

var a = /ABCD/;

var b = new RegExp("ABCD");

a.test("1232142"); false

a.test("가나다란ㄹㅇㄴㄹㅇㄴ"); false

a.test("가나다라ABCD1234"); true

- 사용하는 곳

특정 형식에 부합하는 형식을 추출할 때 사용 (주로 백엔드)

특정 형식에 부합하는지 여부를 알아볼 때 사용 (주로 프론트엔드)

• 정규표현식 이용하기

- Step 01

정규표현식은 대소문자를 구별한다.

- Step 02

눈에 보이지 않는 space, tab, new line도 중요하다

- Step 03

^는 매칭할 문자열의 시작을 의미하고 $는 매칭할 문자열의 끝을 의미한다.

- Step 04

^나 $등 특별한 의미를 가지고 있는 문자열의 literal 값이 필요하다면 역슬레시를 앞에 붙여야한다.

- Step 05

. 은 모든 문자를 의미한다.

- Step 06

.(점)의 literal 값이 필요하다면 역슬래시(\)가 필요하다.

- Step 07

[ ] 대괄호 안에는 매칭될 수 있는 문자의 목록을 넣는다. 목록의 순서는 중요하지 않다.

- Step 08

문자의 범위는 [-] 문법으로 나타낼 수 있다. 여러가지 범위도 Case 5 처럼 하나의 표현식으로 쓸 수 있다.

- Step 09

[ ] 는 문자 클래스이다. 문자 클래스 안에 [^abc] 처럼 첫 문자로 ^가 있다면 abc 각각은 매칭하지 않을 문자 목록이 된다. 즉, 대괄호 안 ^는 not의 의미.

- Step 10

문자열을 교차 매칭 시키려면 소괄호 안에 | 로 구분해서 문자열을 나열하면 된다.

- Step 11 

수량자 : * , + , ?

수량자는 문자가 몇 번 올 수 있는지 정의한다.

* : 0번 이상 ( 없어도 되고 여러가가 있어도 된다)

+ : 1번 이상 (반드시 있어야 하며 여러 개가 있어도 된다)

? : 0번 또는 1번 (없어도 되고 있다면 오직 한 개만 허용)

- Step 12

수량자 * 의 사용 예

- Step 13

수량자 + 의 사용 예

- Step 14

수량자 ? 의 사용 예

- Step 15

{    } 는 정확한 문자의 반복 횟수를 정의한다.

{ m } 는 m번 반복

{ m, n } 는 최소 m번 최대 n번 반복

{ m, } 는 최소 m번 반복

- Step 16

* 는 { 0, }

+ 는 { 1, } 

? 는 { 0, 1 } 와 같다.

• 조건에 부합되면 제출할 수 있는 input창

** 출력 결과 **