js编码解码URL

在js的URL编码解码当中有这两个函数,分别是

编码解码函数

  1. 编码encodeURI(str)
    解码decodeURI(str)
  2. 编码encodeURIComponent
    解码decodeURIComponent

    区别

    encodeURI对于字母和属于URL的字符不进行编码
    但是encodeURIComponent会对属于URL的字符也进行编码
    例如这些字符-_.!~*'()

示例

1
2
var str="http://lxl520.com/程序";
console.log("我是初始字符串"+str);

我是初始字符串http://lxl520.com/程序

1
2
var str2=encodeURI(str);
console.log("我是经过encodeURI编码的:"+str2);

我是经过encodeURI编码的:http://lxl520.com/%E7%A8%8B%E5%BA%8F

1
2
var str3=encodeURIComponent(str);
console.log("我是经过encodeURIComponent编码的:"+str3);

我是经过encodeURIComponent编码的:http%3A%2F%2Flxl520.com%2F%E7%A8%8B%E5%BA%8F

1
2
3
var str2Decode=decodeURI(str2);
var str3Decode=decodeURIComponent(str3);
console.log("我们是经过解码的字符串:"+str2Decode+"\n"+str3Decode);

我们是经过解码的字符串:http://lxl520.com/程序
http://lxl520.com/程序

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL编码</title>
</head>
<body>
<textarea id="get" placeholder="请输入您要编码的字符串"></textarea>
<br>
<button onclick="urlEncode();">点击进行编码</button>
<button onclick="urlDecode();">点击进行解码</button>
<br>

<textarea id="output" placeholder="输出框"></textarea>
<script type="text/javascript">
/**
* @author mohuishou
* [test URL编码测试]
* @return {[type]} [description]
*/
function test(){
var str="http://lxl520.com/程序";
console.log("我是初始字符串"+str);
var str2=encodeURI(str);
console.log("我是经过encodeURI编码的:"+str2);
var str3=encodeURIComponent(str);
console.log("我是经过encodeURIComponent编码的:"+str3);
var str2Decode=decodeURI(str2);
var str3Decode=decodeURIComponent(str3);
console.log("我们是经过解码的字符串:"+str2Decode+"\n"+str3Decode);
}

/**
* @author mohuishou
* 更改输入的值,并将其输出
*/
function urlEncode(){
var getVal=document.getElementById('get').value;//获取输入框的值
var strEncode=encodeURI(getVal);
document.getElementById('output').value=strEncode;//将编码过后的值输出到输出框
}

/**
* [urlDecode 解码函数,对进行解码]
* @return {[type]} [description]
*/
function urlDecode(){
var getVal=document.getElementById('get').value;//获取输入框的值
var strDecode=decodeURI(getVal);
document.getElementById('output').value=strDecode;
}

</script>
</body>
</html>