注：本文已发布超过一年，请注意您所使用工具的相关版本是否适用
在 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
56
| <!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">
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
);
}
function urlEncode() {
var getVal = document.getElementById("get").value;
var strEncode = encodeURI(getVal);
document.getElementById("output").value = strEncode;
}
function urlDecode() {
var getVal = document.getElementById("get").value;
var strDecode = decodeURI(getVal);
document.getElementById("output").value = strDecode;
}
</script>
</body>
</html>
|
关注我获取更新
猜你喜欢
