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
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">
/**
* @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>

关注我获取更新

wechat
知乎
开发者头条
github

猜你喜欢


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处,禁止全文转载