자바스크립트에서 인코딩 처리를 할 때 자주 사용하는 encodeURI, encodeURIComponent 함수가 있는데요. 똑같은 문자열 인코딩 처리를 하는 것처럼 보이지만 문자열 인코딩 처리 방식이 조금 다릅니다. 상황에 따라서 제대로 활용하기 위해 이번 포스팅에서 해당 구문을 정리해보도록 하겠습니다.
encodeURI / decodeURI
encodeURI() 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다.
이스케이프 하지 않는 문자:
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
예시)
// http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces
encodeURI('http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces');
// 결과
"http://webruden.tistory.com/path/to/file.php?foo=123&bar=this%2520has%2520spaces"
encodeURIComponent / decodeURIComponent
encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. encodeURIComponent()는 다음 문자를 제외한 문자를 이스케이프 합니다.
이스케이프 하지 않는 문자:
A-Z a-z 0-9 - _ . ! ~ * ' ( )
예시)
// http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces
encodeURIComponent("http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces")
// 결과
"http%3A%2F%2Fwebruden.tistory.com%2Fpath%2Fto%2Ffile.php%3Ffoo%3D123%26bar%3Dthis%20has%20spaces"
encodeURIComponent()와 encodeURI()의 차이
encodeURIComponent()와 encodeURI()의 차이는 아래와 같습니다.
const set1 = ";,/?:@&=+$"; // Reserved Characters
const set2 = "-_.!~*'()"; // Unescaped Characters
const set3 = "#"; // Number Sign
const set4 = "ABC abc 123"; // Alphanumeric Characters + Space
console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
정리
URI에서 특별한 의미를 가진 예약 문자는 인코딩하지 않고 처리하고 싶다면 encodeURI를 사용하면 되고, 전체 문자열을 모두 인코딩하고 싶다면 encodeURIComponent를 활용하면 됩니다.
'개발 > Javascript' 카테고리의 다른 글
자바스크립트 insertBefore() 사용법 및 간단 예제 (0) | 2021.11.03 |
---|---|
자바스크립트 스크롤 맨 위로/맨 아래로 올리기/내리기 (0) | 2021.10.27 |
자바스크립트 모바일 키보드 닫는 방법(비활성화) | Close Mobile Keyboard & Menu on Return (0) | 2021.07.25 |
인터넷 익스플로러에서 자동으로 엣지로 전환하는 방법(Redirect from IE to Edge) (0) | 2021.04.15 |
[Javascript] append vs appendChild 차이점 (초간단) (2) | 2021.01.19 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.