글 쓰기에 앞서 정규표현식의 기본적인 문법을 알고 있다고 가정하겠다. 로그파일이나 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

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

자바스크립트에서 코딩 하다보면 json 구조인 object 타입과 string 타입으로 변환해야 하는 경우가 자주있다.

이 경우 JSON.parse()와 JSON.stringify() 함수로 변환이 쉽게 가능하다.

먼저 쉬운 stringify 함수부터 써보자.

person 이라는 object를 만들어서 string으로 변환하는 코드를 실행해보면

이렇게 잘 변환된다.

하지만 거꾸로 올 때는 조금 까다롭다.

이렇게 네가지의 string을 만들어놓고 firebug의 console에서 JSON.parse() 함수를 이용해서 변환해보자.

person_str4 변수만 정상적으로 parse 됐다.

자바스크립트 안에서 object로 만들때는 네가지 방법 다 가능하지만

JSON.parse() 를 이용할 때는 key와 value가 모두 쌍따옴표로 감싸져야 한다.

자바스크립트 코딩의 디버그를 도와줄 Firefox의 애드온 Firebug를 설치하자. Firefox를 이용해

https://getfirebug.com/downloads/ 에 접속해서 설치하면 된다. 설치하고 Firefox에서 F12 버튼을 눌러서

이 화면이 나와야 한다.