Blog

자바스크립트 문자열 인코딩/디코딩

자바스크립트 문자열 인코딩 디코딩 메소드별 차이점에 대해서 정리해 보려고 한다.

이번에 검색 작업을 하면서 #태그를 사용할 일이 생겼었다. 평소처럼 encdoeURI/decodeURI를 사용하여 처리 했는데 #가 인코딩 되지 않아 문제가 발생하였다. 확인해 보니 encodeURI는 아래표의 예약어를 제외하고 인코딩 한다고 나와있다. #는 Number sign이라는 타입으로 빠져있는데 무슨의미인지 정확하지 않지만 #역시 인코딩되지 않았다.

Assumes that the URI is a complete URI, so does not encode reserved characters that have special meaning in the URI.

Type Includes
Reserved characters ; , / ? : @ & = + $
Unescaped characters alphabetic, decimal digits, - _ . ! ~ * ' ( )
Number sign #

그래서 encodeURIComponent 메소드를 사용하였다.

encodeURIComponent escapes all characters except the following

주의할 점은 encodeURIComponent를 사용하면 모든 문자열(: / & ? #)을 인코딩 하기 때문에 전체 url를 인코딩할 때 사용하면 서버에서 정상적인 작동을 하지 않을 가능성이 있다. 물론 인코딩 자체를 http://까지 할 경우는 거의 없지만 알아두는 것이 좋을 것 같다.

출처 : MDN