JavaScript / document.URL로 현재 주소 가져오기와 URL 분석

document.URL은 현재 문서의 주소를 문자열로 반환하는 읽기 전용 속성입니다. 주소 전체를 확인할 때 사용하고, 경로·쿼리·해시처럼 일부만 필요하면 반환한 문자열을 new URL(document.URL)로 파싱할 수 있습니다. 주소를 변경해 이동하려면 location.href를 사용합니다.

현재 주소 전체 읽기

document.URL에는 괄호를 붙이지 않습니다. 문서 주소가 https://example.com/guide?lang=ko#example라면 쿼리와 해시를 포함한 전체 문자열이 반환됩니다. 실제 결과는 문서를 연 주소에 따라 다릅니다.

console.log(document.URL);
console.log(location.href); // 현재 페이지에서 같은 주소를 읽을 수 있음

document.URL은 주소를 읽는 속성이므로 여기에 값을 대입해 이동하려고 하지 마세요. 이동 목적이라면 location.href = "..." 또는 location.assign()을 사용합니다. MDN의 document.URL 문서에서 읽기 전용 속성임을 확인할 수 있습니다.

경로·쿼리·해시만 필요할 때

주소 문자열을 직접 슬라이스하기보다 URL 객체로 파싱하면 구성 요소를 분리하기 쉽습니다. 아래 예시는 문서 주소를 읽어 경로와 쿼리 문자열, 해시를 구합니다. 쿼리 값을 개별적으로 읽으려면 searchParams.get()을 사용하세요.

const current = new URL(document.URL);
console.log(current.pathname); // 예: '/guide'
console.log(current.search);   // 예: '?lang=ko'
console.log(current.hash);     // 예: '#example'
console.log(current.searchParams.get('lang')); // 예: 'ko' 

상대 주소를 해석하는 기준 주소와 문서의 현재 주소는 달라질 수 있습니다. <base> 요소가 있으면 document.baseURI를 함께 살펴보세요. MDN의 URL 생성자 문서는 주소 파싱 방법을 설명합니다. 주소를 읽는 다른 속성은 Location 객체의 URL 구성 요소에서 볼 수 있습니다.

전체 예제: 주소 확인과 해시 변경

다음 코드를 document-url.html에 저장해 브라우저에서 엽니다. 현재 주소와 경로·쿼리·해시가 표시됩니다. “아래 구역으로 이동” 링크를 누르면 주소 끝에 #details가 붙고, 해시 변경을 감지해 화면의 값도 갱신됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>현재 문서 URL 확인</title>
</head>
<body>
<p><a href="#details">아래 구역으로 이동</a></p>
<button id="refresh" type="button">URL 다시 읽기</button>
<pre id="result" aria-live="polite"></pre>
<p id="details">아래 구역</p>
<script>
const result = document.querySelector('#result');

function showURL() {
  const current = new URL(document.URL);
  result.textContent = [
    `전체 URL: ${document.URL}`,
    `경로: ${current.pathname}`,
    `쿼리: ${current.search || '(없음)'}`,
    `해시: ${current.hash || '(없음)'}`
  ].join('\n');
}

document.querySelector('#refresh').addEventListener('click', showURL);
window.addEventListener('hashchange', showURL);
showURL();
</script>
</body>
</html>

로컬 파일로 열면 주소가 file:로 시작하고, 웹 서버에서 열면 서버 주소가 표시됩니다. “URL 다시 읽기” 버튼을 눌러 현재 값을 직접 새로고침할 수 있습니다. 이 예제는 주소를 출력할 때 textContent를 사용하므로 URL 문자가 HTML로 해석되지 않습니다.