URL编码解决中文字符乱码(encodeURIComponent、encodeURI和decodeURIComponent、decodeURI)

本文介绍了URI编码的概念,详细阐述了encodeURIComponent和encodeURI的区别及使用场景。encodeURIComponent适用于编码URI片段,对所有非字母数字字符进行编码,而encodeURI用于整个URI,不编码特定的特殊字符。在解码时,对应使用decodeURIComponent和decodeURI。在实际应用中,encodeURIComponent更为常见,特别是在处理查询字符串参数时。

1.概念

URI: Uniform ResourceIdentifiers,通用资源标识符
Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。而这URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字 符,从而让浏览器能够接受和理解。

2、encodeURIComponent

encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、-和_之外的所有字符(可看下表的非转义字符更清晰)。

注意:为了避免服务器收到不可预知的请求,对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。

3、encodeURI

encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:
在这里插入图片描述

注意:encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。故因采用encodeURIComponent这个方法会对这些字符编码。

4、区别

其中encodeURI()主要用于整个URI(例如,http://www.jxbh.cn/illegal value.htm),而encode-URIComponent()主要用于对URI中的某一段(例如前面URI中的illegal value.htm)进行编码。它们的主要区别在于,encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看下面的例子:

var uri="http://www.jxbh.cn/illegal value.htm#start";
encodeURI (uri):
”http: //www.jxbh.cn/illegal%20value .htm#s tart”

encodeURIComponent (uri)
//”http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start”

使用encodeURI()编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换成了%20。而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个URI使用encodeURI(),而只能对附加在现有URI后面的字符串使用encodeURIComponent()的原因所在。一般来说,我们使用encodeURIComponent()方法的时候要比使用encodeURI()更多,因为在实践中更常见的是对查询字符串参数而不是对基础URL进行编码.
很多网站的cookie在进行编码的时候,是encodeURIComponent格式的,所以应该使用decodeURIComponent()进行解码

5、解码

encodeURIComponent 对应 decodeURIComponent
encodeURI 对应 decodeURI

6、浏览器使用

以谷歌浏览器为例,浏览器控制台中进行:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鹏小站

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值