다음과 같은 3가지 함수 중 하나로 한글 주소를 인코딩할 수 있습니다.
* encodeURI() : decodeURI()
* encodeURIComponent() : decodeURIComponent()
* escape() : unescape()
encodeURI() 가 적당합니다. 다만, 주소 전체를 http://부터 모두 인코딩하기 위해서는 encodeURIComponent 를 사용합니다.
인 코딩된 한글 주소를 다시 복원하기 위해서는 각각의 함수에 대응되는 디코딩 함수를 사용합니다.
▶▶ encodeURI, encodeURIComponent, escape 함수 차이점; 자바스크립트
▶▶ JavaScript Tools: Decode/Encode URI Strings
============================================================================================
바스크립트(JavaScript)에서는 다음의 함수들로, HTML 페이지 주소를 인코딩/디코딩합니다.
encodeURI() / decodeURI()
최소한의 문자만 인코딩합니다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
이런 문자는 인코딩하지 않습니다.
http:// ... 등은 그대로 나옵니다.
encodeURIComponent() / decodeURIComponent()
알파벳과 숫자 Alphanumeric Characters 외의, 대부분의 문자를 모두 인코딩합니다.
http:// ... 가 http%3A%2F%2F 로 됩니다.
escape() / unescape()
예 전부터 있던 오래된 함수입니다. encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로 문자를 인코딩합니다.
encodeURI, encodeURIComponent, escape 함수 사용 예제
<html>
<body>
<script type="text/javascript">
var s;
s = encodeURI('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
// 출력 결과: http://www.google.co.kr/%EC%86%8C%20%EC%84%A4.html
s = encodeURIComponent('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
// 출력 결과: http%3A%2F%2Fwww.google.co.kr%2F%EC%86%8C%20%EC%84%A4.html
s = escape('http://www.google.co.kr/소 설.html');
document.write('<p>' + s + '<p>');
// 출력 결과: http%3A//www.google.co.kr/%uC18C%20%uC124.html
< /script>
</body>
< /html>
어 떤 함수든 "공백 문자" 즉 스페이스는 %20 으로 치환합니다. 그러나 주소의 공백은 없어야 합니다.
인터넷 주소창 등에서, 많은 퍼센트(%) 기호들을 볼 수 있습니다. 알파벳과 숫자가 아닌, 특수 문자나 한글이 인코딩되어 있는 것입니다. 이것을 해독하기 위해서는 디코딩(decoding) 과정을 거쳐야 합니다. 위의 입력 양식은 이 과정을 자바스크립트로 구현한 것입니다.
예를 들어, %EC%86%8C%EC%84%A4를 decodeURI() 함수로 디코딩하면 소설이라는 문자열이 나타납니다. 그러나 만약 escape() 함수로 인코딩한다면, 소설이라는 문자열이 %uC18C%uC124 이렇게 표현됩니다. 이것은 unescape() 함수로 풀어야 합니다. encodeURIComponent() 함수는 encodeURI() 함수보다, 더 넓은 범위의 문자들을 인코딩하는 함수입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Event Handler 정리 (0) | 2013.07.18 |
|---|---|
| [JavaScript] 날짜 interval check (두 날짜의 "달" 단위 체크) (0) | 2013.07.03 |
| [JavaScript] 다음달 1일과 마지막일 가져오기 (0) | 2013.02.18 |
| [JavaScript] Debug JavaScript (0) | 2013.02.07 |
| [JavaScript] DOM 정보 (0) | 2013.01.09 |