문자열(string)을 URL object로 사용하면 로케이션 오브젝트(Location Object)처럼 사용할 수 있습니다.

(참고 : [javascript] 로케이션 오브젝트(Location Object)사용 하기 )

URL처리를 자동화할 수 있다는 것이죠 ㅎㅎㅎ

 

 

 

1. 객체 생성하기

로케이션 오브젝트를 생성하기 위해서는 'a'태그를 생성해야 합니다.

(다른 방법이 있는데 못 찾은 건지는 모르겠습니다 -_-a)

 

아래 코드와 같이 'a'태그를 생성한 후 주소(.href)를 설정해 주면 로케이션 오브젝트처럼 쓸 수 있습니다.

 

1
2
var elemA = document.createElement('a');
elemA.href = "http://blog.danggun.net:8080/test/test.html?id=1111&test=22222#asdfasdf";
cs

 

이렇게 생성하면 프로퍼티는 로케이션 오브젝트(Location Object) 처럼 사용할 수 있습니다.

 

2. 테스트

이제 테스트를 해봅시다.

 

 

3. 직접 처리하는 방법

문자열 자체를 직접 파싱해서 url object처럼 사용하는 것도 가능합니다.

아래 다른 사람이 만들어준 파싱함수를 보고 분석하시면 됩니다.

참고 : james.padolsey.com - Parsing URLs with the DOM!

 

 

파싱함수

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
 
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^/])/,'/$1'),
        relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^//,'').split('/')
    };
}
cs

 

 

사용방법

 

1
2
3
4
5
6
7
8
9
10
11
12
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
 
myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
cs

 

 

마무리

 

직접 로케이션 오브젝트를 생성하는 방법이 왜 없는지 모르겠습니다.

차라리 로케이션 오브젝트가 문자열로만 받을 수 있으면 구현 자체가 안 돼어 있다고 생각할 텐데 이렇게 기능이 있는데 우회에서 써야 한다니-_-;;

댓글 작성

이름
패스워드
홈페이지
비밀글

티스토리 툴바