Urlencode encoding and decoding method under Javascript with decodeURIComponent

Regarding the encoding results of ASP (Server.UrlEncode), PHP (urlencode()) function, or the Chinese characters written directly into COOKIES through dynamic languages ​​such as asp and php, when reading with JS, you will encounter a The encoding problem is that the final string is encoded by urlencode, and it is sometimes necessary to read the data from JS on the client side.

This article will briefly talk about how to solve this problem in js through the system's own functions.

I believe that friends who have encountered this problem should know something about it. Currently, some custom functions under js are popular on the Internet to solve this problem, such as vbscript (URLDecode()), javascript (UrlDecode() ))wait. Neither of these two functions can communicate well with each other asp (Server.UrlEncode) and php (urlencode()).
About vbscript (function URLDecode()) and javascript (function UrlDecode()) will also be reproduced at the end of this article.

The protagonist of this article is javascript (UrlDecodedecodeURIComponent()). This function name is so common that I personally don’t really understand it. After all, there are many system functions in js and it is easy to miss it. Worry discovered this function by accident!

Encoding function: encodeURIComponent()
Decoding function: decodeURIComponent()
decodeURIComponent() syntax

decodeURIComponent(URIstring) 
参　数：(URIstring）必需。一个字符串，含有编码 URI 组件或其他要解码的文本。 
返回值：URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

Example:

<script type="text/javascript"> 
var test1="烦恼"; 
var test2="%E7%83%A6%E6%81%BC"; 
document.write("编码（原="+test1+"）："+encodeURIComponent(test1)+ "<br />"); 
document.write("解码（原="+test2+"）："+decodeURIComponent(test2)); 
</script>

Result:

编码（原=烦恼）：%E7%83%A6%E6%81%BC 
解码（原=%E7%83%A6%E6%81%BC）：烦恼

Note: This article is only tested in UTF-8 encoding environment. Because in different encoding environments, the compiled code of asp (Server.UrlEncode) seems to be different and needs to be tested!
Attached reprint:
vbscript (function URLDecode())

<script type="text/VBscript"> 
<!-- 
Function URLDecode(enStr) 
    dim deStr,strSpecial 
    dim c,i,v 
    deStr="" 
    strSpecial="!""#$%&&#39;()*+,.-_/:;<=>?@[\]^`{|}~%" 
    for i=1 to len(enStr) 
        c=Mid(enStr,i,1) 
        if c="%" then 
            v=eval("&h"+Mid(enStr,i+1,2)) 
            if inStr(strSpecial,chr(v))>0 then 
            deStr=deStr&chr(v) 
            i=i+2 
            else 
            v=eval("&h"+ Mid(enStr,i+1,2) + Mid(enStr,i+4,2)) 
            deStr=deStr & chr(v) 
            i=i+5 
            end if 
        else 
            if c="+" then 
            deStr=deStr&" " 
            else 
            deStr=deStr&c 
            end if 
        end if 
    next 
    URLDecode=deStr 
End function 
//--> 
</script>

javascript (function UrlDecode()) actually uses vbscript softly. It seems that in the javascript environment, for asc, hex, chr related Conversion, such as str.charCodeAt(0).toString(16) and String.fromCharCode(str). Under different encodings, the encoding results for Chinese are not uniform.
For example: vbscript str2asc/asc2str

<script type="text/vbscript"> 
Function str2asc(strstr) 
str2asc = hex(asc(strstr)) 
End Function 
Function asc2str(ascasc) 
asc2str = chr(ascasc) 
End Function 
MsgBox str2asc("a") 
MsgBox asc2str("&H61")&#39;16进制转的61　转到　10进制就是　97 
</script>

javascript str2asc/asc2str

<script type="text/javascript"> 
function str2asc(str){ 
return str.charCodeAt(0).toString(16); 
} 
function asc2str(str){ 
return String.fromCharCode(str); 
} 
alert(str2asc("a"));// 
alert(asc2str("0x61"));// 
</script>

Demonstration:

<script type="text/vbscript"> 
            Function str2asc(strstr) 
            str2asc = hex(asc(strstr)) 
            End Function 
            Function asc2str(ascasc) 
            asc2str = chr(ascasc) 
            End Function 
</script> 
<script type="text/javascript"> 
    /*这里开始时UrlEncode和UrlDecode<a href="/?tag=%E5%87%BD%E6%95%B0" target="_blank">函数</a>*/ 
    function UrlEncode(str){ 
        var ret=""; 
        var strSpecial="!\"#$%&&#39;()*+,/:;<=>?[]^`{|}~%"; 
        var tt= ""; 
        for(var i=0;i<str.length;i++){ 
        var chr = str.charAt(i); 
        var c=str2asc(chr); 
        tt += chr+":"+c+"n"; 
        if(parseInt("0x"+c) > 0x7f){ 
        ret+="%"+c.slice(0,2)+"%"+c.slice(-2); 
        }else{ 
        if(chr==" ") 
        ret+="+"; 
        else if(strSpecial.indexOf(chr)!=-1) 
        ret+="%"+c.toString(16); 
        else 
        ret+=chr; 
        } 
        } 
        return ret; 
    } 
    function UrlDecode(str){ 
        var ret=""; 
        for(var i=0;i<str.length;i++){ 
        var chr = str.charAt(i); 
        if(chr == "+"){ 
        ret+=" "; 
        }else if(chr=="%"){ 
        var asc = str.substring(i+1,i+3); 
        if(parseInt("0x"+asc)>0x7f){ 
        ret+=asc2str(parseInt("0x"+asc+str.substring(i+4,i+6))); 
        i+=5; 
        }else{ 
        ret+=asc2str(parseInt("0x"+asc)); 
        i+=2; 
        } 
        }else{ 
        ret+= chr; 
        } 
        } 
        return ret; 
    } 
    alert(UrlDecode("%C2%D2%C2%EB")); 
</script>

For more urlencode encoding and decoding methods under Javascript, please attach decodeURIComponent related articles. Follow PHP Chinese website!