[javascript] 문자열 디코딩하기

07 Dec 2023

javascript

문자열 디코딩은 주어진 인코딩된 문자열을 원래의 형태로 변환하는 과정을 말합니다. 이는 웹 개발에서 자주 사용되는 작업 중 하나로, URL 인코딩이나 HTML 엔티티 디코드 등 다양한 상황에서 필요합니다.

URL 디코딩

URL 디코딩은 주어진 URL 인코딩된 문자열을 해독하여 원래의 문자열로 변환하는 작업입니다. JavaScript에서는 decodeURI()와 decodeURIComponent() 함수를 사용할 수 있습니다.

const encodedUrl = "https%3A%2F%2Fexample.com%2F%3Fq%3Djavascript%26page%3D1";
const decodedUrl = decodeURIComponent(encodedUrl);

console.log(decodedUrl);
// 출력: "https://example.com/?q=javascript&page=1"

decodeURI()는 URL의 일반 문자열 구성요소만 해독하는 반면, decodeURIComponent()은 위 예시에서 %로 시작하는 모든 부분을 해독합니다.

HTML 엔티티 디코드

HTML 엔티티 디코드는 HTML에서 사용되는 특수 문자 엔티티를 원래의 문자로 변환하는 작업입니다. JavaScript에서는 <textarea> 엘리먼트를 활용하여 이 작업을 쉽게 할 수 있습니다.

const encodedHtml = "&lt;div&gt;Hello&lt;/div&gt;";
const textarea = document.createElement("textarea");
textarea.innerHTML = encodedHtml;
const decodedHtml = textarea.value;

console.log(decodedHtml);
// 출력: "<div>Hello</div>"

위 코드에서는 <textarea> 엘리먼트를 동적으로 생성하고, 인코딩된 HTML 문자열을 내부에 할당한 뒤, value 속성을 통해 디코드된 문자열을 얻습니다.

기타 디코딩

URL 디코딩과 HTML 엔티티 디코드 외에도 다른 디코딩 작업이 필요한 경우가 있을 수 있습니다. 예를 들어, Base64 디코딩은 인코딩된 문자열을 디코드하여 원래의 이진 데이터로 변환하는 작업입니다. JavaScript에서는 atob() 함수를 사용하여 Base64를 디코드할 수 있습니다.

const encodedBase64 = "SGVsbG8gd29ybGQh";
const decodedBase64 = atob(encodedBase64);

console.log(decodedBase64);
// 출력: "Hello world!"

위 예시에서는 atob() 함수를 사용하여 인코딩된 Base64 문자열을 디코드하여 원래의 문자열을 얻습니다.

결론

문자열 디코딩은 웹 개발에서 자주 사용되는 작업 중 하나입니다. URL 디코딩, HTML 엔티티 디코드 및 Base64 디코딩과 같은 다양한 디코딩 작업을 JavaScript를 통해 간편하게 수행할 수 있습니다. 위 예시 코드를 활용하여 필요한 디코딩 작업을 직접 구현해보세요.

URL 디코딩

HTML 엔티티 디코드

기타 디코딩

결론

참고 자료