[JavaScript]URL 객체 생성 및 파싱하는 방법

URL 객체 생성 및 파싱하는 방법

이번 포스팅은 JavaScript에서 URL 객체 생성 및 파싱하는 방법을 소개합니다.

---

URL 객체 생성자

JavaScript에서 URL 객체는 new 키워드와 URL() 생성자 함수를 사용하여 생성할 수 있습니다.

const url = new URL(url [, base]);

url

- 절대 또는 상대 URL입니다.

- 생략할 수 없습니다.

 

base

- 첫 번째 매개변수가 상대 URL인 경우 두 번째 매개변수는 절대 URL입니다.

- 첫 번째 매개변수가 절대 URL인 경우 생략할 수 있습니다.

- 첫 번째 매개변수가 상대 URL인데, 두 번째 매개변수를 생략하면 TypeError가 발생합니다.

 

다음 예제는 동일한 URL을 절대 URL과 상대 URL 방식으로 URL 객체를 생성합니다.

// 절대 경로(Absolute path)
const url1 = new URL('https://stackoverflow.com/questions?tab=Active');

// 상대 경로(Relative path)
const url2 = new URL('/questions?tab=Active', 'https://stackoverflow.com');

---

URL 유효성 체크

URL() 생성자 함수에서 첫 번째 매개변수가 상대 URL인데, 두 번째 매개변수를 생략하면 TypeError가 발생한다고 설명하였습니다.

const url = new URL('/questions?tab=Active');

[실행 결과]

 

try~catch문을 사용하여 TypeError로 인해 catch문이 실행되면, false를 반환하도록 합니다.

const isValidURL = strURL => {
  try {
    new URL(strURL);
  } catch(e) {
    return false;
  }
  return true;
};

console.log(isValidURL('/questions?tab=Active')); // false

---

URL 파싱 방법

URL 객체는 프로토콜, 호스트 이름, 경로 이름, Query String, Hash 등.. 다양한 프로퍼티를 가지고 있습니다. 따라서, URL 객체에서 제공하는 프로퍼티를 사용하여 원하는 정보를 추출할 수 있습니다.

const url = new URL('https://stackoverflow.com/questions?tab=Active');

console.log(url.protocol); // https:
console.log(url.pathname); // /questions
console.log(url.origin);   // https://stackoverflow.com
console.log(url.search);   // ?tab=Active
console.log(url.host);     // stackoverflow.com

URL 객체의 프로퍼티	설명
search	물음표(?)부터 시작하며, 해시가 제거된 Query String입니다.
protocol	프로토콜(http 또는 https)입니다.
host 또는 hostname	URL의 호스트 이름입니다.
pathname	URL의 경로 이름입니다. 경로가 없으면 슬래시 문자(/)를 반환합니다.
hash	#부터 시작하는 해시입니다.
port	URL의 포트입니다.

표에 작성된 프로퍼티 외에도 URL 객체는 다양한 프로퍼티를 가지고 있으며, URL 객체의 프로퍼티는 Mozilla에서 확인할 수 있습니다.

URL() - Web API | MDN

---

URL 객체 조작

URL 객체의 origin, searchParams 프로퍼티를 제외한 나머지 프로퍼티는 변경 가능하므로 URL을 조작할 수 있습니다.

 

다음 예제는 "https://stackoverflow.com/questions?tab=Active"에서 protocol을 http로 변경합니다.

const url = new URL('https://stackoverflow.com/questions?tab=Active');

console.log(url.protocol);   // https:
console.log(url.toString()); // https://stackoverflow.com/questions?tab=Active

url.protocol = 'http:';

console.log(url.protocol);   // http:
console.log(url.toString()); // http://stackoverflow.com/questions?tab=Active