JavaScript에서 URL을 다루다 보면 한글이나 공백, 특수 문자 등을 인코딩하거나 디코딩해야 하는 상황이 자주 발생합니다. 이럴 때 사용하는 것이 바로 encodeURI(), decodeURI() 그리고 encodeURIComponent(), decodeURIComponent() 함수입니다. 각 함수의 역할과 차이점을 살펴보겠습니다.
주요 함수별 역할
encodeURI() 함수는 전체 URI를 인코딩하지만, (, / ? : @ & = + $ #) 같은 URI 구조에 필수적인 특수 문자는 인코딩하지 않고 그대로 유지합니다.
encodeURIComponent() 함수는 URI의 일부(구성 요소)를 인코딩할 때 사용되며, 위에서 언급한 특수 문자들까지 포함하여 거의 모든 특수 문자를 인코딩합니다.
decodeURI() 함수는 encodeURI()로 생성된 인코딩된 URI를 원래 형태로 되돌리는(디코딩하는) 기능을 합니다.
decodeURIComponent() 함수는 encodeURIComponent()로 생성된 URI의 일부를 디코딩하는 데 사용됩니다.
아래는 네 가지 함수의 동작을 확인할 수 있는 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="en">
<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;
}
.encode,
.decode {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>encodeURI(), decodeURI() and its components functions</h1>
<button class="encodeUri">ENCODE URI</button>
<button class="decodeUri">DECODE URI</button>
<button class="encodeUriComponent">ENCODE URI COMPONENT</button>
<button class="decodeUriComponent">DECODE URI COMPONENT</button>
<div class="encode"></div>
<div class="decode"></div>
<h3>
Click on the above buttons to encode or decode URI component
</h3>
<script>
let fillEle = document.querySelector(".sample");
let decodeEle = document.querySelector(".decode");
let encodeEle = document.querySelector(".encode");
let url = "https://www.google.com/sample%20link/?img=91gf.jpg&size=451px";
let encodeUrl;
document.querySelector(".encodeUri").addEventListener("click", () => {
encodeUrl = encodeURI(url);
encodeEle.innerHTML = "Encoded url = " + encodeUrl;
});
document.querySelector(".decodeUri").addEventListener("click", () => {
decodeEle.innerHTML = "Decoded url = " + decodeURI(encodeUrl);
});
let encodeComponent;
document
.querySelector(".encodeUriComponent")
.addEventListener("click", () => {
encodeComponent = encodeURIComponent(url);
encodeEle.innerHTML = "Encoded url = " + encodeComponent;
});
document
.querySelector(".decodeUriComponent")
.addEventListener("click", () => {
decodeEle.innerHTML =
"Decoded url = " + decodeURIComponent(encodeComponent);
});
</script>
</body>
</html>
실행 결과
위 예제를 실행한 후 "ENCODE URI" 버튼을 클릭하고 이어서 "DECODE URI" 버튼을 클릭하면 아래와 같이 인코딩된 URL이 다시 원래의 URL로 복원되는 것을 확인할 수 있습니다.
정리하자면, 전체 URL을 안전하게 유지하면서 인코딩할 때는 encodeURI()를, 쿼리 파라미터 값처럼 URI의 개별 구성 요소를 인코딩할 때는 encodeURIComponent()를 사용하는 것이 좋습니다. 디코딩 시에는 각각 짝이 되는 decodeURI()와 decodeURIComponent()를 사용하면 됩니다.