[JavaScript] URL Encode, Decode 그리고 간단한 유틸Util / 플러스 값 처리

1. URL 인코딩이란

 1) 잡소리 

   미국인들을 위한 아스키 인코딩의 태동 이래 영어권에서 사용하는 알파벳 이외에는   항상 문제가 인코딩이다. URL도 이와 비슷한 성격을 가지고 있다.

 2) 데이터 보내기와 받기를 위한 URL 직렬화

   URL을 통해 보내는 방식인 GET 방식은 특성상 key-value의 형태로 데이터를 주고 받   는다. 이 또한 기본적으로 아스키 인코딩을 따르는데 한글/한자와 같은 문자를 주고     받기 위해서는 UTF-8을 이용한 인코딩과 디코딩이 필요했다. 

 3) 고로

   위와 같은 표준 덕분에 Java / JavaScript / Oracle 등등에서는 URL Encode/Decode     함수를 제공하고 있다. 이 포맷은 x-www-form-urlencoded 을 따른다.

 4) 국제 표준 내용(뜬금없이 Java URLEncoder의 주석을 따왔다)

        /* The list of characters that are not encoded has been

         * determined as follows:

         *

         * RFC 2396 states:

         * -----

         * Data characters that are allowed in a URI but do not have a

         * reserved purpose are called unreserved.  These include upper

         * and lower case letters, decimal digits, and a limited set of

         * punctuation marks and symbols.

         *

         * unreserved  = alphanum | mark

         *

         * mark        = "-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"

         *

         * Unreserved characters can be escaped without changing the

         * semantics of the URI, but this should not be done unless the

         * URI is being used in a context that does not allow the

         * unescaped character to appear.

         * -----

         *

         * It appears that both Netscape and Internet Explorer escape

         * all special characters from this list with the exception

         * of "-", "_", ".", "*". While it is not clear why they are

         * escaping the other characters, perhaps it is safest to

         * assume that there might be contexts in which the others

         * are unsafe if not escaped. Therefore, we will use the same

         * list. It is also noteworthy that this is consistent with

         * O'Reilly's "HTML: The Definitive Guide" (page 164).

         *

         * As a last note, Intenet Explorer does not encode the "@"

         * character which is clearly not unreserved according to the

         * RFC. We are being consistent with the RFC in this matter,

         * as is Netscape.

         */

 요는 "-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")" 와 같은 특수문자는 인코딩/디코딩하지 않는다는 것이고, 알파벳을 제외한 값은 인코딩과 디코딩을 하겠다는 것이다. 자잘한건 필요할때 보자.

2. Java Script 공식 함수

 - 인코드 Encode 를 위한 함수 : 

   encodes는 (* @ - _ + . /) 를 제외하고 인코딩

   encodeURI는 (, / ? : @ & = + $ #)를 제외하고 인코딩 

   encodeURIComponent 는 모조리 인코딩

 - 디코드 Decode 를 위한 함수 :

   unescape는 (* @ - _ + . /) 를 제외하고 디코딩

   decodeURI는 (, / ? : @ & = + $ #)를 제외하고 디코딩 

   decodeURIComponent 는 모조리 디코딩

 - 주의할 점: encodes 와 unescape는 함수 사용을 권장하지 않고 있고, 브라우저가 상위로 업데이트 될 때 호환을 버릴 수 있으므로 사용을 하지 말자

3. 플러스(+) 값은 어떻게 해야하나

 # Java에서 Encode한 값을 JavaScript에서 처리할 때의 문제 해결 방법

 (설명글이 필요없으면 바로 4로 가시오)

 예제를 먼저 보자

 "플러스값은 어떻게 하지++" 라는 값을 JavaEncode 하면 아래와 같다

 "%ED%94%8C%EB%9F%AC%EC%8A%A4%EA%B0%92%EC%9D%80+%EC%96%B4%EB%96%BB%EA%B2%8C+%ED%95%98%EC%A7%80%2B%2B"

 이 값을 바로 Decode 시, 아래와 같이 나온다.

 "플러스값은+어떻게+하지++"

 

 이때 +를 해결하기 위한 방안은 우선, decodeURI로 + 값을 Decode에서 제외한 뒤

 Replace로 "+" -> " " 로 바꾸는 것이다.

 따라서 아래와 같이 하면 스페이스를 제대로 출력할 수 있다.

 decodeURIComponent(decodeURI(str).replace(/\+/g, " "))

4. 간단한 유틸

/* URL Encoding String to String */

function decodeString(str){

if(str.indexOf("+") > 0){

return decodeURIComponent(decodeURI(str).replace(/\+/g, " "));

} else {

return decodeURIComponent(decodeURI(str));

}

}