Front-end/Javascript

[Javascript]현재 페이지의 url값을 가져올 때 한글이 들어가있는 경우

by 빽짱구 2024. 6. 26.

현재 페이지의 url값이 한글일경우 한글을 가져오지 못하고 " %EC%BB%A4%EC%8A%" 이런식으로 깨지게 될경우 decodeURL()로 처리하면 됩니다.

// 현재 페이지의 URL을 가져오기
let url = window.location.href;

// URL 디코딩
url = decodeURI(url);

// 결과 출력 (선택 사항)
console.log(url);

 

코드 설명

  1. let url = window.location.href;
    • window.location.href: 브라우저의 현재 페이지 URL을 나타냅니다. window.location 객체는 현재 문서의 위치(URL)에 대한 정보를 제공하며, href 속성은 전체 URL을 문자열로 반환합니다.
    • 이 줄은 현재 페이지의 URL을 url 변수에 저장합니다.
    예를 들어, 현재 페이지의 URL이 https://example.com/page?name=John%20Doe라면, 이 줄의 결과로 url 변수에는 https://example.com/page?name=John%20Doe가 저장됩니다.
  2. url = decodeURI(url);
    • decodeURI(url): url 변수에 저장된 URL 문자열을 디코딩합니다. decodeURI 함수는 URL의 인코딩된 부분을 사람이 읽을 수 있는 형식으로 변환합니다.
    • URL 인코딩은 공백이나 특수 문자를 %20 같은 형식으로 변환합니다. decodeURI 함수는 이를 다시 원래 문자로 되돌립니다.
    예를 들어, https://example.com/page?name=John%20Doe는 디코딩 후 https://example.com/page?name=John Doe가 됩니다.
  3. console.log(url);
    • 이 줄은 디코딩된 URL을 콘솔에 출력합니다. 이는 선택 사항이며, 결과를 확인하는 데 유용합니다.

전체 코드의 역할

이 코드는 현재 페이지의 URL을 가져와 디코딩하여 사람이 읽을 수 있는 형식으로 변환합니다. 이를 통해 URL에 인코딩된 문자(예: %20 등)가 원래 문자로 복원됩니다.

예시

// 현재 페이지 URL이 https://example.com/page?name=John%20Doe 인 경우
let url = window.location.href; // url = "https://example.com/page?name=John%20Doe"
url = decodeURI(url);           // url = "https://example.com/page?name=John Doe"

// 결과 출력
console.log(url); // "https://example.com/page?name=John Doe"

이렇게 하면 URL에 포함된 인코딩된 문자들이 디코딩되어 더 읽기 쉽게 됩니다.

 

jQuery 일경우는 아래처럼 해주시면 됩니다.

let url = $(location).attr('href');
url = decodeURI(url);
728x90