자바스크립트를 사용하여 URL 구분하기

자바스크립트를 사용하여 URL을 구분하는 함수 입니다.

function parseUrl(url) {
    const aEl = document.createElement('A');

    aEl.href = url;

    const arr = aEl.search.replace(/^\?/, '').split('&');
    const searchObj={};

    let queries;

    for (let i in arr) {
        queries = arr[i].split('=');
        searchObj[queries[0]] = queries[1];
    }

    return {
        protocol: aEl.protocol,
        host: aEl.host,
        hostname: aEl.hostname,
        port: aEl.port,
        pathname: ('/' + aEl.pathname).replace(/^\/\//, '\/'),
        search: aEl.search,
        searchObj: searchObj,
        hash: aEl.hash
    };
}

HTML의 `<a>`를 활용하는 방법으로 `<a>`에 URL을 적용한 후, 필요한 값만 뽑아서 객체로 반환 합니다.

간단하게 사용하기 좋습니다.

`http://url.com/index.html?a=1&b=2` 형태에 사용이 가능합니다.

URL텍스트 값만 가지고 값을 구분하기 때문에 텍스트의 형태에 따라서 못 가지고 오는 값도 있습니다.

브라우저 마다 값의 형태가 다를 수 있습니다. 사용 전에 `console.log()`를 사용하여 값의 형태를 확인하고 추가적인 기능을 더 넣어야 할 수 있습니다.

GET 방식으로 넘어오는 파라미터는 `querys`에 `key:value`형태로 들어갑니다.

pathname은 host뒤의 경로값 입니다. 브라우저에 따라서 맨 앞에 `/`가 없는 경우도 있기 때문에 `/`가 항상 있도록 했습니다.

port의 경우 `http://url.com:8080`처럼 URL에 명시되어 있어야 값이 나오는 브라우저도 있고, 브라우저가 알아서 붙여주는 경우도 있습니다.

hash는 'http://url.com/index.html#id` 처럼 `#`뒤에 명시되어 있는 ID값을 말합니다. #뒤에 있는 모든 문자를 ID로 인식합니다.


참고 : https://www.abeautifulsite.net/parsing-urls-in-javascript