[javascript] 문자열을 로케이션 오브젝트로 변환 하기(String to Location Object), 혹은 'URL'오브젝트로 변환

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

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

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

 

 

 

1. 객체 생성하기

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

 

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

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

 

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

 

이제 테스트해 봅시다.

 

 

2. 'URL' 개체로 처리하기

'new URL([처리할 url])'로 'URL'개체를 만들어 처리할 수 있습니다.

function GetLocation() 
{      
  let url = new URL("http://blog.danggun.net:8080/test/test.html?id=1111&test=22222#asdfasdf");
  document.querySelector("#labHash").innerText = url.hash;
  document.querySelector("#labHost").innerText = url.host;
  document.querySelector("#labHostname").innerText = url.hostname;
  document.querySelector("#labPathname").innerText = url.pathname;
  document.querySelector("#labHref").innerText = url.href;
  document.querySelector("#labOrigin").innerText = url.origin;
  document.querySelector("#labPort").innerText = url.port;
  document.querySelector("#labProtocol").innerText = url.protocol;
  document.querySelector("#labSearch").innerText = url.search;
}

 

 

3. 직접 처리하는 방법

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

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

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

 

직접 파싱하는 방법은 아래 방법 말고도 여러 가지가 있습니다.

필요에 따라 필요한 부분만 잘라주도록 만드는 것도 성능향상을 위한 방법도 있습니다.

아래 코드는 예제라고 생각하시면 됩니다.

 

 

구현한 파싱 함수

// 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('/')
    };
}

 

 

사용방법

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'

 

 

마무리

직접 만들어 쓰는 방법은 다양합니다.

어느 쪽이 더 좋을지는 자신의 판단인 거죠 ㅎㅎㅎㅎ