'encodeURIComponent'에 해당되는 글 1건

Front End 개발 중 자주 대면하게 되는 문제점중 하나가 한글 인코딩 문제이다.

한글을 그대로 파싱 할 경우 오류가 발생하게 되는데 이를 해결하는 방법은 아래와 같다.

http://www.mywebpage.com/한글.jsp

위와 같이 한글이 포함된 URL 이 있다고 가정했을 경우 URL 인코딩을 하게 되면 

http://www.mywebpage.com/%ED%95%9C%EA%B8%80.jsp

위와 같이 이스케이프 처리 되며 이를 받는 쪽에서는 decode 처리 하여 처음 원했던 URL 을 획득할 수 있다. 

인터넷에서 URL 처리는 ASCII 캐릭터 셋으로만 처리되는데 한글을 ASCII 코드로 변환할 필요가 있음으로 URL 인코딩을 하게 된다.

처리 방법은 아래와 같다.

▶ 한글 인코딩 > encodeURI() 함수 사용

var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp");

// 결과 값 >>> http://www.mywebpage.com/%ED%95%9C%EA%B8%80.jsp

▶ 인코딩 된 한글 디코딩 > decodeURI() 함수 사용

var decodeStr = decodeURI(encodeStr);

// 결과 값 >>> http://www.mywebpage.com/한글.jsp

encodeURI() 및 decodeURI() 는 한글만 처리 해주고 있지만 URL 전체를 처리하고자 할 경우 

encodeURIComponent() 및 decodeURIComponent() 를 사용하면 된다.

▶ URL 전체 인코딩 > encodeURIComponent() 함수 사용

var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp");

// 결과 값 >>> http%3A%2F%2Fwww.mywebpage.com%2F%ED%95%9C%EA%B8%80.jsp

▶ 인코딩 된 URL 전체 디코딩 > decodeURIComponent() 함수 사용

var decodeStr = decodeURI(encodeStr);

// 결과 값 >>> http://www.mywebpage.com/한글.jsp

사용 목적에 따라 encodeURI() / decodeURI() 또는 encodeURIComponent() / decodeURIComponent() 를 사용하면 된다. 

HTML5 에서의 default character set 은 UTF-8 이며, 아래는 ASCII 코드 표 이다.

( Reference : http://www.w3schools.com/tags/ref_urlencode.asp )