'tool'에 해당되는 글 1건

  1. [javascript] url parameter handling 2

[javascript] url parameter handling

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