블로그 내 검색

2012. 2. 26.

URL의 쿼리스트링 가져오기

얼마전 자바스크립트로 URL 쿼리스트링을 파싱하는 방법에 대해 질문을 받아 포스팅으로 올립니다.

쿼리스트링은 DOM 객체중에 location의 search 속성을 사용하여 얻어올 수 있습니다.
// 만일 
// http://example.com/index.html?say=Hello+World+!&name=javarouka&mail
// 이라면
var queryStrinfg = window.location.search;

// 결과는 '?say=Hello+World+!&name=javarouka&mail'
console.log(queryStrinfg);
쿼리스트링은 키와 값이 '=' 로 구분되어 있고 그 셋이 '&' 로 나열됩니다.

그렇다면 정규표현식이나 split 함수를 사용하여 파싱할 수 있습니다.
주의할 점은 반드시 값에 URLDecode가 필요하며, 공백 문자는 '+' 로 대체되니 주의해야 합니다.

먼저 '+' 를 공백으로 교체하고, 나머지 문자열에 대해 URLDecode을 적용하면 괜찮을 것 같습니다.

아래 코드에서는 정규표현식을 쓰는 방법을 사용했습니다.
그럼 아래 코드로 풀어봅시다.
var QueryObject = function() {

    var o = {};

    var q = location.search.substring(1);
    if (q) {

        // 실제 그룹화 정규식.
        var vg = /([^&=]+)=?([^&]*)/g;
        
        // 인코딩된 공백문자열을 다시 공백으로
        var sp = /\+/g;

        // 정규식을 사용하여 값을 추출
        var decode = function(s) {
            if (!s) {
                return '';
            }
            return decodeURIComponent(s.replace(sp, " "));
        };

       // 한번씩 exec를 실행하여 값을 받아온다.
        var tmp; 
        while (tmp = vg.exec(q)) {
            (function() {
                var k = decode(tmp[1]);
                var v = decode(tmp[2]);
                var c;
                if (k) {
                    o[k] = v;
                    // getXXX 형식의 자바빈 타입으로 사용하고 싶다면
                    // 윗 라인을 지우고, 아래와 같이 하면 됩니다.
                    //c = k.charAt(0).toUpperCase() + k.slice(1);
                    //o["get" + c] = function() { return v; }
                    //o["set" + c] = function(val) { v = val; }
                }
            })();
        }
    }
    return o;
};

댓글 없음:

댓글 쓰기