escape() / encodeURI() / encodeURIComponent() > 기술자료 | 해피정닷컴

escape() / encodeURI() / encodeURIComponent() > 기술자료

본문 바로가기

사이트 내 전체검색

escape() / encodeURI() / encodeURIComponent() > 기술자료

JavaScript escape() / encodeURI() / encodeURIComponent()

페이지 정보


본문

이 모든 함수는 자바스크립트에서 인코딩을 담당하는 함수이다.

여기서 말하는 인코딩이란, 네트워크를 통해서 정보를 공유할 때 어떤 시스템에서나 읽을 수 있는 ASCII 문자로 바꿔주는 것을 말한다. 모든 네트워크를 통한 전송에는 ASCII 문자가 기반이 된다. 특히 한글이나 특수문자의 경우 이를 2진수 바이트코드로 변환해서 전송하면 받는 상대편의 시스템에 따라 잘못 해석되거나, 해석이 불가능할 수 있기 때문이다.

이를 해결하기 위해 모든 시스템에서 공통으로 읽을 수 있는 ASCII 문자로 바꿔서 데이터를 전송할 필요가 있다.



1. escape()

아래 열거된 아스키문자가 아니라면 모두 유니코드 형식으로 변환한다.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
@*-_+./

그 변환된 형식은 16진수 형식으로 표시되며 1바이트 문자는 %XX 형태로, 2바이트 문자는 %uXXXX 형태로 변환된다.
1바이트 문자는 빈칸(%20)을 들 수 있고, 2바이트 문자는 한글(%uD55C%uAE00)이 있을 수 있다.

가끔 인터넷검색을 하면 주소창에 %XX형식의 문자들이 들어있는 것을 볼 수 있는데, 이는 인코딩 된 것의 한 종류라고 볼 수 있다.

가끔은 홈페이지의 자바스크립트나 HTML 소스, 음원URL을 보기 힘들게 하기 위해 사용하기도 하지만,
이는 자바스크립트의 인코딩을 아는 자라면 어렵지 않게 풀어 사용할 수 있다.



2. encodeURI()

기본적으로는 escape()와비슷한 동작을 하지만 인터넷 주소표시에 쓰이는 특수문자들을 인코딩하지 않는다.
즉,  : ; / = ? &  등의 특수문자는 인코딩이 되지 않는다.
그래서 보통은 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩할 때 사용한다.



3. encodeURIComponent()

기본적인 동작은 역시 escape()와 비슷하지만 인터넷 주소표시에 쓰이는 모든 문자를 추가로 인코딩한다.
즉,  : ; / = ? &  등의 특수문자가 추가로 인코딩 되는 것이다.

그래서 인터넷주소(URL) 전체를 인코딩할 때는 사용할 수 없고, 넘기는 필드 하나하나를 따로 인코딩할 때 사용한다.
그 이유는 넘어가는 값이 text="test=&테스트" 이와 같이 text라는 필드 값이 test=&테스트인 경우 그냥 encodeURI()로 인코딩 하면, '=' 나 '&'는 인코딩되지 않아서 필드값을 처리할 때 데이터값이 아닌 여러개의 필드를 넘기는 명령어로 인식할 수 있기 때문이다.

하지만, "http://test.com/test.php?text=테스트" 와 같은 URL 전체를 encodeURIComponent()로 인코딩하게 되면 : / ? 를 모두 인코딩하여 주소를 인식할 수 없게 된다.



4. 실제 인코딩의 차이를 보여주는 Javascript 소스

var chr = 'http://test.com/folder1/folder2/default.html?mode=write&value=&*테스트';  
  
document.writeln("original = " + chr + '<br />');  
document.writeln("escape() = <font color='red'>" + escape(chr) + "</font><br />");  
document.writeln("encodeURI() = <font color='blue'>" + encodeURI(chr) + "</font><br />");  
document.writeln("encodeURIComponent() = <font color='orange'>" + encodeURIComponent(chr) + "</font><br />");  


위의 소스를 <script></script> 안에 넣고 실행하면 인코딩의 차이를 직접 확인 할 수 있다.


관련자료
http://www.finebe.com/41 
인코딩과 디코딩 결과 확인  http://realmind.tistory.com/entry/Javascript-Escape-Encoder-v01 

댓글목록

등록된 댓글이 없습니다.


Total 2,641건 79 페이지
  • RSS
기술자료 목록
1081
PHP   21799  2012-03-16 23:55 ~ 2014-12-28 00:00  
1080
Adobe   20279  2012-03-16 17:16  
1079
HTML   15000  2012-03-16 17:10  
1078
ClassicASP   12069  2012-03-15 02:08  
1077
ClassicASP   21720  2012-03-15 01:58 ~ 2016-10-21 00:00  
1076
ClassicASP   25027  2012-03-15 00:08 ~ 2016-02-29 00:00  
열람
JavaScript   15991  2012-03-12 23:33  
1074
PHP   22871  2012-03-04 17:29  
1073
PHP   21779  2012-03-04 17:09 ~ 2023-01-08 11:38  
1072
Linux   18298  2012-03-02 18:38  
1071
전자결제   12265  2012-03-02 14:34  
1070
영카트   12821  2012-03-02 13:03  
1069
PHP   27540  2012-03-01 21:47 ~ 2012-04-08 00:00  
1068
MySQL   17887  2012-02-29 22:30  
1067
그누보드   11525  2012-02-27 14:09  
1066
ClassicASP   34669  2012-02-21 00:14 ~ 2014-11-11 00:00  
1065
그누보드   15569  2012-02-12 23:59  
1064
Search   22561  2012-02-11 08:13 ~ 2022-04-15 19:42  
1063
PHP   15636  2012-02-11 08:05  
1062
그누보드   12486  2012-02-10 22:14 ~ 2016-11-21 00:00  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.