글 쓰기에 앞서 정규표현식의 기본적인 문법을 알고 있다고 가정하겠다. 로그파일이나 html소스등 파싱해야 할 경우가 종종 생기는데 자바스크립트에서 정규표현식을 사용하여 원하는 문자열을 뽑아오는 방법이다.

"jekalmin 25 male 2014-08-22" 라는 로그가 있다고 가정하고 하나씩 뽑아와보자.

먼저 정규표현식을 작성해야 하는데, 작성할 때 유의할 사항은 뽑아내고자 하는 문자열을 괄호로 감싸야 한다.

이제 이 정규표현식을 그대로 자바스크립트로 가져오자.

자바스크립트에서 정규표현식 선언하는 방법은 두가지가 있다.

1. new RegExp(정규표현식)

ex.) var reg = new RegExp("(.+)\\s(\\d+)\\s(male|female)\\s(\\d{4}-\\d{2}-\\d{2})");

여기서는 이스케이프 처리(\ -> \\)를 해줘야한다.

2. /정규표현식/

ex.) var reg  = /(.+)\s(\d+)\s(male|female)\s(\d{4}-\d{2}-\d{2})/;

가능하면 new 보다는 정규식 리터럴인 이 방법을 사용한다.

방법은 두가지이다.

하나는 string의 replace를 이용해서 $1, $2 가 첫번째, 두번째 괄호에 해당하는 문자열을 가리킨다.

두번째는 정규표현식의 exec을 이용하면 array를 리턴하는데, 0번째는 매칭되는 전체 문자열, 그 이후로는 첫번째, 두번째 괄호에 해당하는 문자열을 담고있다.

위의 코드 결과는

이런식으로 나타난다.

테스트 코드 주소 :

https://github.com/jekalmin/Jekal/blob/master/html/test/regexp_test.html

이클립스에서 정규표현식 테스트할때 사용되는 정규표현식 플러그인이고 보기가 편하게 표기되는 Regex Util 을 소개한다.

설치 방법은 이클립스 메뉴에서 Help > Install New Software 로 간 후에

Add 버튼을 누르면 창이 뜨는데, Location부분에

http://regex-util.sourceforge.net/update/

를 입력하면 아래와 같은 화면이 된다.

이후 계속 다음을 눌러서 설치를 완료하면 이클립스가 다시 실행된다.

설치가 됐으면 이클립스 메뉴에서

Window > Show View > Other 에 가서

regex로 검색하시면 아래와 같은 화면이 될 것이다.

확인을 누르면

이제 개발하면서 테스트 할 수 있는 공간이 생길 것이다.

아래 주소는 Regex Util의 홈페이지 주소이다.

http://myregexp.com/eclipsePlugin.html

url의 파라미터를 유연하게 핸들링하기 위해 고민하다가 JSON.parse와 JSON.stringify 와 비슷하게 만들었다.

jekalURL = {
	parse : function(url){
		var urlParameter = {};
		var httpCheck = /(http|https):\/\/.*/;
		
		if(!httpCheck.test(url)){
			url = 'http://' + url;
		}
		var a = document.createElement('a');
		a.href = url;
		var urlParamString = a.search;
		
		if(urlParamString.length > 1 && urlParamString.charAt(0) == '?'){
			var urlParamArray = urlParamString.substring(1).split('&');
			var i, len, eIdx, urlParam;
			for(i=0, len=urlParamArray.length; i < len; i++){
				urlParam = urlParamArray[i];
				eIdx = urlParam.indexOf('=');
				urlParameter[urlParam.substring(0, eIdx)] = decodeURIComponent(urlParam.substring(eIdx+1));
			}
			
		}
		return urlParameter;
	},
	stringify : function(obj){
		if(typeof obj != 'object'){
			return '';
		}
		var urlPairs = [];
		for(var key in obj){
			urlPairs.push(key + '=' + encodeURIComponent(obj[key]));
		}
		if(urlPairs.length < 1){
			return '';
		}
		return '?' + urlPairs.join('&');
	}
};

var params = jekalURL.parse("http://jekalmin.tistory.com?name=Min&age=25&sex=mail");
console.log(params); // { name : "Min", age : 25, sex : "male" }

delete param.age;
delete param.sex;

param.address="seoul";
console.log(params); // { name : "Min", address : "seoul" }
console.log("http://jekalmin.tistory.com" + jekalURL.stringify(params));

http://jekalmin.tistory.com?name=Min&age=25&sex=male 에서

http://jekalmin.tistory.com?name=Min&address=seoul로 변환하는 예제이다.

콘솔에서 로그를 세번 찍었는데 결과는 

이런식으로 나타난다.

source code : 

https://github.com/jekalmin/Jekal/blob/master/html/urlParameter.html