encodeURIComponent(), encodeURI()란?

| encodeURIComponent() ?

---

encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나,둘 OR 셋의 연속된 이스케이프 문자로 나타냅니다.

※두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네개로 변환됩니다.

 

다음 문자를 제외한 모든 문자를 이스케이프(유니코드 형식으로 변환) 합니다.

1BYTE 문자는 %XX, 2BYTE 문자는 %uXXXX 형태로

Not Escaped:

    A-Z a-z 0-9 - _ . ! ~ * ' ( ) //영 대소문자, 숫자 , *-_.,! ~ ' ( ) 은 제외

 

 

구문

encodeURIComponent(str);

매개변수

: URI 구성요소

 

반환 값

주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열

 

| encodeURIComponent()와 encodeURI()의 차이

 

 

var str1 = ";,/?:@&=+$";  // Reserved Characters
var str2 ="-_.!~*'()";   // 이스케이프가 안되는 문자들
var str3 ="#";
var str4 ="ABC abc 123";  //A~B , a~b  ,숫자는 그대로 출력 
단, 공백은 변환


console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

 

상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 URIError가 발생합니다.

 

 

// 상위 하위 쌍 만족한 경우
console.log(encodeURIComponent('\uD800\uDFFF'));

// 상위만 만족한 경우 "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uD800'));

// 하위만 만족한 경우 "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uDFFF')); 

 

encodeURIComponent()를 사용하여 서버에 POST 요청할 양식 필드를 인코딩 해야한다.

입력중 의도치 않게 생성될 수 있는 HTML특수 개체 등의 "&" 문자를 처리할 수 있습니다.

 

ex) "ABC & DEF"  ==  "ABC & DEF" 로 인코딩이 됩니다.

만약, encodeURIComponent()를 사용하지 않는다면 서버가 앰퍼샌트(&)를 새로운 필드의 시작으로 인식할 수 있으므로

데이터의 무결성을 해칠 수 있습니다. (따라서 꼭 사용해 줍시다 !!!)

 

---

 

| decodeURIComponent() 란?

---

인코딩된 문자열을 사람이 읽을 수 있는 형태로 원복하려면 decodeURIComponent()를 이용한다.

 

 

ex)

<script>

function myFunction() {

    var mURL = "http://www.xxx.xx/info?page=3&title=";

    var uri = "developer&enginner";

    var res = encodeURIComponent(uri);

    document.getElementById("enco").innerHTML = res;

    

    var dc = decodeURIComponent(res);

    document.getElementById("deco").innerHTML = dc;

    //alert("decoded : " + dc);

    

    var rt = mURL + res;

    document.getElementById("result").innerHTML = rt;

}

</script>

결과
인코딩 : developer%26enginner



디코딩 : developer&enginner



최종결과 : http://www.xxx.xx/info?page=3&title=developer%26enginner