JavaScript에서 URL 작업하기

JavaScript에서는 때때로 링크 주소를 작업해야 합니다. 이를 위해 URL의 부분을 가져오고 변경할 수 있는 <URL> 클래스가 있습니다.

다음 주소를 예로 들어 작업 방법을 살펴보겠습니다:

let path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

<URL> 클래스의 객체를 생성하고 매개변수로 주소를 전달하겠습니다:

let url = new URL(path);

생성된 객체에 어떤 속성이 있는지 살펴보겠습니다.

프로토콜

<protocol> 속성을 사용하여 프로토콜을 가져올 수 있습니다:

let res = url.protocol;
console.log(res); // 'http://'를 출력합니다

<host> 속성을 사용하여 포트가 포함된 도메인 이름을 가져올 수 있습니다:

let res = url.host;
console.log(res); // 'site.ru:3000'를 출력합니다

<hostname> 속성을 사용하여 도메인 이름을 가져올 수 있습니다:

let res = url.hostname;
console.log(res); // 'site.ru'를 출력합니다

<port> 속성을 사용하여 포트를 가져올 수 있습니다:

let res = url.port;
console.log(res); // '3000'를 출력합니다

<pathname> 속성을 사용하여 도메인 이름을 제외한 경로를 가져올 수 있습니다:

let res = url.pathname;
console.log(res); // '/dir/eee/page.html#show?a=1&b=2&c=3'를 출력합니다

<hash> 속성을 사용하여 해시 값을 가져올 수 있습니다:

let res = url.hash;
console.log(res); // 'show'를 출력합니다

<search> 속성을 사용하여 GET 매개변수 문자열을 가져올 수 있습니다:

let res = url.search;
console.log(res); // 'a=1&b=2&c=3'를 출력합니다

<searchParams> 속성을 사용하여 GET 매개변수를 <URLSearchParams> 클래스의 객체 형태로 가져올 수 있습니다:

let res = url.searchParams;
console.log(res); // URLSearchParams 클래스의 객체를 출력합니다