본문 바로가기

JavaScript

escape(), encodeURI(), encodeURIComponent() 차이

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

비슷하면서도 다른 함수들 입니다.
세가지 함수 모두 ASCII문자로 바꿔주는데, 그럼 각각의 차이점을 알아 보겠습니다.

1. escape() : unescape()  

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./

위에서 열거된 문자가 아니면 모두 변환을 합니다. 1바이트문자는 %XX 형태로 2바이트 문자는 %uXXXX 식으로 변환합니다.

 2. encodeURI() : decodeURI()
 escape()와 같이 변환을 하지만,인터넷 주소에서 쓰는 특수 문자  : ; / = ? &  는 변환을 하지 않습니 다.

 3. encodeURIComponent() : decodeURIComponent()
  인터넷 주소에서 쓰는 특수 문자  : ; / = ? &  까지 변환을 합니다. 인터넷 주소를 하나의 변수에 넣을때  쓸 수 있습니다.
★ 덧붙임 : encodeURIComponent() 는 UTF-8 로 인코딩 하는 것과 같음

 예제)
<script type="text/javascript">
       var url = "http://yesyo.com/?retrun=고고";
       document.write('<p><b>URL :</b> ' + url + '</p>');
       document.write('<p><b>escape() :</b> ' + escape(url) + '</p>');
       document.write('<p><b>encodeURI() :</b> ' + encodeURI(url) + '</p>');
       document.write('<p><b>encodeURIComponent() :</b> ' + encodeURIComponent(url) + '</p>');
</script>

 결과 :
 URL : http://yesyo.com/?retrun=고고
 escape() : http%3A//yesyo.com/%3Fretrun%3D%uACE0%uACE0
 encodeURI() : http://yesyo.com/?retrun=%EA%B3%A0%EA%B3%A0
 encodeURIComponent() : http%3A%2F%2Fyesyo.com%2F%3Fretrun%3D%EA%B3%A0%EA%B3%A0
  
출처 :http://yesyo.com/mintbbs/bbs/board.php?bo_table=javascript&wr_id=163&sfl=&stx=&sst=wr_datetime&sod=desc&sop=and&page=1

 추가 사항 1.
URL을 통째로 인코딩할 때는 encodeURI(),
URL의 파라메터만 인코딩할 때는 encodeURIComponent()를 쓰면 된다.
escape()/unescape()는 잊어버려라.

추가 사항 2.
자바의 java.net.URLEncoder는 어떨까?
결론은 이녀석은 자바스크립트의 encodeURI()와 동일하다.
주의할 점은 java.net.URLEncoder의 두개의 함수 중의 파라메터가 두개인 녀석(캐릭터 인코딩을 지정해주는)을, 두번째 파라메터를 "UTF-8"로 지정해서 사용해야 한다.

추가 사항 3.
적용 예) CharSet="UTF-8" 인 JSP에서 AJAX(XMLHttpRequest)로 한글 파라미터 전송시,
JSP : &param=encodeURI(encodeURIComponent("한글"));  와 같이 한글 파라미터 처리.
JAVA : URLDecoder.decode(request.getParameter("param"), "UTF-8");  와 같이 디코딩 처리.

참고 :
  http://d.hatena.ne.jp/kskyuny/20090304/1236145944
  http://blog.naver.com/akrsg/140118242329

'JavaScript' 카테고리의 다른 글

Json 형식 validation  (0) 2012.08.10
Javasript defer 옵션  (0) 2012.07.18
자바스크립트 function Trim()  (0) 2010.10.01
텍스트박스 한글/영문 세팅  (0) 2010.08.27
[Script] event.keyCode 의 키표  (0) 2010.08.27