资讯专栏INFORMATION COLUMN

JS基础篇--JS对url进行编码和解码(三种方式区别)

xiaoxiaozi / 1499人阅读

摘要:它的具体规则是,除了字母数字标点符号以外,对其他所有字符进行编码。对应的解码函数是。其次,不对编码。与的区别是,它用于对的组成部分进行个别编码,而不用于对整个进行编码。因此,,这些在中不被编码的符号,在中统统会被编码。

Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起。

escape 和 unescape

实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,也就是说在Unicode字符集中,"春"是第6625个(十六进制)字符,"节"是第8282个(十六进制)字符。

它的具体规则是,除了ASCII字母数字、标点符号"@ * _ + - . /"以外,对其他所有字符进行编码。在u0000到u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

还有两个地方需要注意。

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。

其次,escape()不对"+"编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

例如:
编码:

escape("http://www.baidu.com?name=zhang@xiao@jie&order=1")
结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

escape("张")
结果:"%u5F20"

解码:

unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

unescape("%u5F20")
结果:"张"
encodeURI 和 decodeURI

encodeURI()是Javascript中真正用来对URL编码的函数。

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。
它对应的解码函数是decodeURI()。

注:需要注意的是,它不对单引号"编码。

例如:
编码:

encodeURI("http://www.baidu.com?name=zhang@xiao@jie&order=1")
结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

解码:

decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"
encodeURIComponent 和 decodeURIComponent

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。
它对应的解码函数是decodeURIComponent()。

例如:
编码:

encodeURIComponent("http://www.baidu.com?name=zhang@xiao@jie&order=1")
结果:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"

解码:

decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
"http://www.baidu.com?name=zhang@xiao@jie&order=1"

参考地址:阮一峰:关于URL编码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87337.html

相关文章

  • JSurl进行编码解码三种方式

    摘要:对应的解码函数是。它用于对的组成部分进行个别编码,除了常见的符号以外,对其他一些在网址中有特殊含义的符号,也不进行编码。元黑糖颗粒固饮编码解码元黑糖颗粒固饮 escape 和 unescape escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值 它的具体规则是,除了ASCII字母、数字、标点符号@ * _ + - . /以外,对其他所有字符进行编码...

    lx1036 评论0 收藏0
  • JavaScript中三种GBK/GB2312编解码方案

    摘要:笔者在编码详解与中编码实践一文中介绍了中编码相关的基础知识,其中没有介绍纯粹的编解码方案,笔者后来根据网上的代码完善了下这个库,并且对中三种不同的编解码方案进行了比较。 Isomorphic Urlencode Here is English Version For README 笔者在URL编码详解与DOM中GBK编码实践一文中介绍了JavaScript中URL编码相关的基础知识,其...

    BlackFlagBin 评论0 收藏0
  • JS基础--JS之表单提交时编码类型enctype详解

    摘要:格式支持比键值对复杂得多的结构化数据,这一点也很有用。例如下面这段代码最终发送的请求是这种方案,可以方便的提交复杂的结构化数据,特别适合的接口。 简介 form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。 ...

    ad6623 评论0 收藏0
  • 企业级Android音视频开发学习路线+项目实战+源码解析(WebRTC Native 源码、X26

    摘要:因此,对音视频人才的需求也从小众变成了大众,这更多的是大家对未来市场的预期导致的结果。做个勤奋向上的人,加紧学习,抓住中心,宁精勿杂,宁专勿多。 前言 如今音视频的...

    tomato 评论0 收藏0
  • 前端安全系列:XSS

    摘要:系列文章前端安全系列篇前端安全系列篇攻击全称跨站脚本攻击,为不和层叠样式表的缩写混淆,故将跨站脚本攻击缩写为,是一种在应用中的计算机安全漏洞,它允许恶意用户将代码植入到提供给其它用户使用的页面中。 系列文章: 前端安全系列:XSS篇前端安全系列:CSRF篇 XSS攻击 全称跨站脚本攻击,为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻...

    xiaolinbang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<