Javascript URL 클래스 간단 사용법

JavaScript의 URL 클래스는 URL 주소를 파싱하고 조작할 수 있는 객체를 제공합니다.

 

아래의 간단한 사용법을 예제를 통해서 설명을 드리겠습니다.

 

예제1

1. 주소 파싱

URL 클래스는 주어진 URL 문자열을 파싱하여 다양한 요소로 분리하여 제공합니다. 예를 들어, 호스트 이름, 프로토콜, 포트 번호, 경로 등을 추출할 수 있습니다.

const url = new URL('https://www.example.com/path/to/resource?query=value');

console.log(url.protocol); // "https:"
console.log(url.host); // "www.example.com"
console.log(url.pathname); // "/path/to/resource"
console.log(url.search); // "?query=value"

 

2. 주소 생성

URL 클래스는 URL 문자열을 구성하는 요소들을 사용하여 새로운 URL을 생성할 수 있습니다.

const newUrl = new URL('/new/path', 'https://www.example.com');

console.log(newUrl.href); // "https://www.example.com/new/path"

 

3. 주소 조작

URL 클래스는 URL 주소를 조작하는 다양한 메서드를 제공합니다. 예를 들어, 쿼리 문자열을 추가, 수정 또는 삭제하는 등의 작업이 가능합니다.

const url = new URL('https://www.example.com/path/to/resource?query=value');
url.searchParams.append('newParam', 'value');

console.log(url.search); // "?query=value&newParam=value"

 

4. 모든 속성 보기

URL 클래스는 주어진 URL이 어떤 프로토콜을 사용하는지, 호스트 이름이 무엇인지 등의 URL 속성을 확인할 수 있습니다.

const url = new URL('https://guest:1234@www.example.com:8080/path/to/resource?query=value#title')

console.log(url.href) // "https://www.example.com/path/to/resource?query=value"
console.log(url.protocol) // "https:"
console.log(url.username) // "guest"
console.log(url.password) // "1234"
console.log(url.host) // "www.example.com"
console.log(url.hostname) // "www.example.com"
console.log(url.port) // "8080"
console.log(url.pathname) // "/path/to/resource"
console.log(url.search) // "?query=value"
console.log(url.hash) // "title"

 

끝까지 읽어 주셔서 감사합니다.

더 많은 자료는 아래의 MDN 사이트 링크에서 확인 하시기 바랍니다.

URL - Web API | MDN