WEB/JavaScript

자바스크립트의 encodeURI 관련

AlrepondTech 2016. 6. 3. 16:50
반응형

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

출처: http://blog.iolo.kr/344

 

자바스크립트에는 URL 인코딩과 관련해서 4가지 함수가 있다.
encodeURI()encodeURIComponent()escape()/unescape() 이 그것인데...
구글신께 여쭈었더니... 이렇게 다르다고 말씀해 주셨다.

정말?
일단, 실험을 해보기로 했다.

저 사이트에 나온 파일을 UTF-8과 EUC-KR로 각각 저장했다.

test-utf8.html, test-euckr.html

<html>
<body>
<script type="text/javascript">
var s;
s = encodeURI('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
s = encodeURIComponent('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
s = escape('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
</script>
</body>
</html>


그리고 각각의 파일의 헤더 영역에 다음의 메타 태그들을 끼워넣은 파일을 두개 더 만들었다.

test-utf8-meta.html

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />


test-euckr-meta.html

<meta http-equiv="Content-Type" content="text/html;charset=EUC-KR" />


그리고, 이 페이지들을 한글 IE7, 영문 IE6, 영문 IE7, FF 2.0 으로 브라우져로 테스트 했다. 혹시나 싶어서 IE의 경우엔 항상 "UTF-8로 URL을 보내기" 옵션도 바꿔가면서 해봤는데... 말그대로 URL을 보내는 것이 아니라서 차이가 없었다.

이런 

삽질

을 왜 하냐 싶겠지만...
내가 기대한 것은 첫번째 경우지만... 결과를 보면... 정말... 다들 제각각이다. -.-;;;;

test-utf8-meta.html, test_euckr.html, test-euckr-meta.html, 한글 IE7, FF
test-utf8-meta.html, 영문 IE6/7(한글 언어 팩 없음)

http://www.google.co.kr/%EC%86%8C%20%EC%84%A4.html
http%3A%2F%2Fwww.google.co.kr%2F%EC%86%8C%20%EC%84%A4.html
http%3A//www.google.co.kr/%uC18C%20%uC124.html


test-utf8.html, 한글 IE7

http://www.google.co.kr/????html
http%3A%2F%2Fwww.google.co.kr%2F%3F%3F%3F%3Fhtml
http%3A//www.google.co.kr/%3F%3F%3F%3Fhtml


test-utf8.html, 영문 IE6/7(한글 언어 팩 없음)

http://www.google.co.kr/%C3%AC%E2%80%A0%C5%92%20%C3%AC%E2%80%9E%C2%A4.html
http%3A%2F%2Fwww.google.co.kr%2F%C3%AC%E2%80%A0%C5%92%20%C3%AC%E2%80%9E%C2%A4.html
http%3A//www.google.co.kr/%EC%u2020%u0152%20%EC%u201E%A4.html


test-euckr.html, 영문 IE6/7(한글 언어 팩 없음)
test-euckr-meta.html, 영문 IE6/7(한글 언어 팩 없음)

http://www.google.co.kr/%C2%BC%C3%92%20%C2%BC%C2%B3.html
http%3A%2F%2Fwww.google.co.kr%2F%C2%BC%C3%92%20%C2%BC%C2%B3.html
http%3A//www.google.co.kr/%BC%D2%20%BC%B3.html


정리해보자:

  1. meta 태그는 반드시 넣어줘야 한다. 없으면... IE가 힘들어 한다.
  2. meta 태그가 있어도 영문 환경에서 한글 언어 팩이 안깔려있으면 euc-kr은 황~이다.
  3. URL을 통째로 인코딩할 때는 encodeURI(), URL의 파라메터만 인코딩할 때는 encodeURIComponent()를 쓰면 된다.
  4. escape()/unescape()는 잊어버려라.
  5. 왠만하면 URL에 인코딩이 필요한 꺼리(한글... 공백... 이런 거)는 넣지 말자.


덧1.
여기서 의문점 한가지 더! 그렇다면 자바의 java.net.URLEncoder는 어떨까?
결론은 이녀석은 자바스크립트의 encodeURI()와 동일하다.
주의할 점은 java.net.URLEncoder의 두개의 함수 중의 파라메터가 두개인 녀석(캐릭터 인코딩을 지정해주는)을, 두번째 파라메터를 "UTF-8"로 지정해서 사용해야 한다는 것이다. 파라메터가 한 개인 첫번째 녀석을 쓰면... 플랫폼의 기본 인코딩(-Dfile.encoding)을 따라가므로 개차반(?) 난다.
자바에선 이것 저것 다 잊어버리고... 그냥 바이트 배열로 뽑아서 commons-codec의 URLCodec을 쓰는게 정신 건강에 이롭다.

덧2.
나름 좀 한다는 개발자들 조차 인코딩과 캐릭터셋에 대해서 오락가락한다. 자바 API 개발자들 조차 헷갈리고 있으니...(java 1.6의String#getBytes()와 1.3의 String#getBytes()의 파라메터 이름을 보시라~~. commons-codec의 URLCodec의 getEncoding()getDefaultCharset()도 보시라~~). 오죽하랴마는... 인코딩은 인코딩이고, 캐릭터셋은 캐릭터셋이다. 말하자면, "유니코드(캐릭터셋)에 속한 글자들은 UTF-8(인코딩)이나 UTF-16(인코딩)등으로 표현할 수 있다." 정도 일까? 그러니까, UTF-8이건 EUC-KR이건, URL 인코딩을 하는 입장에선 그냥 바이트 배열일 뿐이다. 더 어렵나?? =3=3=333

 

 

 

 

반응형

 

728x90

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://meetkei.com/?p=2887

 

 

웹에서는 유니코드 문자를 그대로 사용할 경우 문제가 발생할 수 있으므로 적절히 인코딩해 주어야 합니다. 이러한 인코딩 방식을 퍼센트 인코딩(percent-encoding)이라고 합니다. 자바스크립트에서는 인코딩과 디코딩을 위한 내장함수를 제공합니다.

escape() & unescape()

escape() 함수는 영문, 숫자, 특수문자(@, *, -, _, +, ., /) 외의 모든 문자에 인코딩을 적용합니다. unescape() 함수는 escape()로 인코딩된 문자를 원래 문자로 디코딩합니다.

“http://meetkei.com?type=escape&kor=이스케이프” 라는 URL을 escape 함수로 인코딩하면 다음 그림과 같이 출력됩니다.

 

encodeURI() & decodeURI()

encodeURI() 함수는 escape()와 유사하지만 URL에서 사용하는 특수문자(:, ;, /, =, ?, &)를 변환하지 않습니다. decodeURI() 함수는 이렇게 인코딩된 문자를 원래 문자로 디코딩합니다.

실행결과는 다음과 같습니다. escape() 실행결과와 달리 http 다음의 : 문자와 .com 다음의 ? 문자가 그대로 출력되는 것을 확인할 수 있습니다.

 

encodeURIComponent() & decodeURIComponent()

encodeURIComponent() 함수는 영문자와 숫자를 제외한 모든 문자을 인코딩합니다. 이 방식은 UTF-8 인코딩과 동일합니다.

 

 

=================================

=================================

=================================

 

 

반응형