JavaScript Basic #3

JavaScript#3

UI & API

API: Application Programming Interface, 프로그램에서 사용할 수 있도록 OS나 프로그래밍 언어가 제공하는 기능을 제어하기 위해 만든 조작 장치.

UI: User Interface, 유저가 직접 프로그램을 사용할 때 제공되는 인터페이스.

Java Script의 API는 크게 JavaScript 자체 API와 JavaScript가 동작하는 호스트 환경의 API로 구분

 

정규표현식

Regular Expression. 문자열에서 특정한 문자를 찾아내는 도구.

정규표현식은 두 가지 단계로 이루어짐. 하나는 컴파일, 다른 하나는 실행.

1.    컴파일 (Compile)

-       검출하고자 하는 패턴을 만드는 일.

-       먼저 정규표현식 객체를 만들어야 함. 객체를 만드는 방법은 두 가지가 있음.

1.      정규표현식 리터럴:

var pattern = /a/

2.      정규표현식 객체 생성자:

var pattern = new RegExp(‘a’);

위 코드는 정규표현식 리터럴에 예시로 적은 코드와 같은 역할을 함.

 

2.    실행 (Execution)

정규표현식 메소드 실행

-       RegExp.exec(‘인자’): 입력한 패턴(RegExp의 괄호 안에 넣은 문자열)이 제공받은 인자 안에 있으면 패턴을 반환

alert(pattern.exec(‘asdf1234’));

alert(pattern.exec(‘qwerzxcv’));

인자에서 a를 찾으면 a라는 문자열을 반환하고, 그렇지 않으면 null을 반환하는 것을 볼 수 있음.

 

-       RegExp.test(‘인자’): 인자 안에 패턴에 해당되는 문자열이 있으면 True, 아니면 False를 반환

alert(pattern.test(‘asdf1234’));

alert(pattern.test(‘qwerzxcv’));

‘a’ 패턴이 있는 문자열에서는 true를, 없는 문자열에서는 ‘false’를 반환하는 것을 확인할 수 있음.

 

문자열 메소드 실행

-       String.match(RegExp): RegExp.exec(‘인자’)와 비슷함.

alert(‘asdf1234’.match(pattern));

alert(‘qwerzxcv’.match(pattern));

패턴에 해당하는 문자가 String에 있으면 패턴의 문자열을 리턴, 그렇지 않으면 null을 리턴하는 것을 확인할 수 있음.

-       String.replace(RegExp, ‘변경할 문자열’): String에서 패턴을 검색해 패턴에 해당하는 부분을 변경할 문자열로 바꾸고 변경된 값을 리턴

alert(‘asdf1234’.replace(pattern,’q’));

alert(‘qwerzxcv’.replace(pattern,’q’));

String에 a가 q로 바뀌어 출력되는 것을 볼 수 있음.

옵션

-       i: i를 붙이면 대/소문자를 구분하지 않음.

alert('ASDF1234'.match(noCheckC));

-       g: 검색된 모든 결과 리턴

var Check = /a/;

var CheckAll = /a/g;

alert('asdfasdfasdf'.match(Check));

alert('asdfasdfasdf'.match(CheckAll));

-       캡처: 괄호 안의 패턴은 마치 변수처럼 재사용 할 수 있음.

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

alert(result);

공백(\s)을 기준으로 문자열이 2개의 그룹으로 나뉘었다고 생각하면 됨. 즉, ‘coding’이라는 문자열이 $1, ‘everybody’라는 문자열이 $2인 것임.

-       치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '빈집 채우는 중 : http://binzip2.tistory.com 입니다.';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

alert(result);

Html 하이퍼링크 태그로 치환시킨 것을 볼 수 있음.