자바스크립트(JavaScript)로 URL 객체를 생성하고 활용하는 방법

자바스크립트(JavaScript)에서는 내장된 URL 생성자를 사용하여 문자열 형태의 웹 주소를 구조화된 객체로 변환할 수 있습니다. 이렇게 만든 URL 객체는 프로토콜(protocol), 호스트(host), 경로(pathname) 등 각 구성 요소에 개별적으로 접근할 수 있어, 복잡한 문자열 파싱 없이도 URL을 손쉽게 분석하고 조작할 수 있습니다.

URL 객체 생성 방법

URL 객체는 new URL() 문법으로 생성합니다. 생성자의 인자로 분석하려는 전체 URL 문자열을 전달하면 됩니다.

let url = new URL("https://google.com/image=23&size=440px");

아래는 버튼 클릭 시 URL 객체를 생성하고 주요 속성 값을 화면에 출력하는 완전한 예제 코드입니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Url object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display a url object</h3>
<script>
    let resEle = document.querySelector(".result");
    let url = new URL("https://google.com/image=23&size=440px");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML += "url protocol = " + url.protocol + "<br>";
        resEle.innerHTML += "url host = " + url.host + "<br>";
        resEle.innerHTML += "url.pathname = " + url.pathname + "<br>";
    });
</script>
</body>
</html>

출력

위의 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

자바스크립트(JavaScript)로 URL 객체를 생성하고 활용하는 방법

'CLICK HERE' 버튼을 클릭하면 아래와 같이 URL 객체의 각 속성 값이 화면에 출력됩니다.

자바스크립트(JavaScript)로 URL 객체를 생성하고 활용하는 방법

주요 속성 설명

예제에서 출력되는 세 가지 속성의 의미는 다음과 같습니다.

url.protocol : URL의 프로토콜 부분을 반환합니다. 이 예제에서는 https:가 출력됩니다.
url.host : 도메인(호스트) 정보를 반환합니다. 여기서는 google.com이 됩니다.
url.pathname : 도메인 뒤에 붙는 경로(path) 부분을 반환합니다. 이 예제에서는 /image=23이 출력됩니다.

이처럼 URL 객체를 활용하면 검색 매개변수(searchParams), 해시(hash), 포트(port) 등 그 밖의 다양한 구성 요소도 속성 하나만으로 간편하게 조회할 수 있습니다.