1. 关于URL、encodeURI 及 encodeURIComponent:

URI: Uniform Resource Identifiers,通用资源标识符

Global 对象的 encodeURI() 和 encodeURIComponent() 方法可以对 URI 进行编码,以便发送给浏览器。

有效的 URI 中不能包含某些字符,例如空格。而这 URI 编码方法就可以对 URI 进行编码,它们用特殊的 UTF-8 编码替换所有无效的字符,从而让浏览器能够接受和理解。

其中 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";
//”http: //www.jxbh.cn/illegal%20value .htm#s tart”
alert(encodeURI (uri)):
//”http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start”
alert( encodaURIComponent (uri));

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

2. 关于 decodeURI、decodeURIComponent:

了解了 encodeURI 与 encodeURIComponent 的区别后,我们来看下 decodeURI 与 decodeURIComponent。

总结:最好使用 decodeURIComponent() 进行解码。

防止中文乱码方法: decodeURIComponent(数据,true)

3. 一个小考题:

// 请解码被多次编码的 URL
例子:https%253A%252F%252Fwww.baidu.com%252F%253Ftest%253D1
条件:被编码次数未知 结果:https://www.baidu.com/?test=1

decodeURI 与 decodeURIComponent 区别的更多相关文章

  1. js解码编码decodeURI与decodeURIComponent区别

    ###decodeURI与decodeURIComponent区别 1. 概念: URI: Uniform ResourceIdentifiers,通用资源标识符 Global对象的encodeURI ...

  2. JS中decodeURI()与decodeURIComponent()区别

    decodeURI()定义和用法:decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码. 语法:decodeURI(URIstring) 参数 描述:URIstrin ...

  3. 一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

    一.这四个方法的用处 1.用来编码和解码URI的 统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串.除了e ...

  4. encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

    一.这四个方法的用处 1.用来编码和解码URI的 统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串.除了e ...

  5. 结合实例详细介绍encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()使用方法

    在介绍encodeURI().encodeURIComponent().decodeURI().decodeURIComponent()方法前我们需要了解Global对象的概念:   Global(全 ...

  6. javascript中escape()、unescape()、encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()比较

    这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法.U ...

  7. decodeURI、decodeURIComponent 编码方法

    ——摘自<JavaScript高级程序设计> 编码: Global 对象的 encodeURI()和 encodeURIComponent()方法可以对 URI(Uniform Resou ...

  8. JS中encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

    js 对文字进行编码涉及2个函数:encodeURI,encodeURIComponent,相应2个解码函数:decodeURI,decodeURIComponent 1.用来编码和解码URI的 统一 ...

  9. JavaScript decodeURI()与decodeURIComponent() 使用与区别

    decodeURI()定义和用法:decodeURI()函数可对encodeURI()函数编码过的URI进行解码.语法:decodeURI(URIstring)参数描述:URIstring必需,一个字 ...

随机推荐

  1. Github相关问题集锦

    问题 对于我们国内用户,有时候浏览器在进入github网站时,会出现无法加载或加载很慢的问题,针对这一问题,很是头疼,为解决这一问题,在网上搜索到的解决方法如下: 解决方案 修改hosts文件,在ho ...

  2. rabbitMQ 重试

    rabbitMQ 重试机制 spring.rabbitmq.listener.simple.retry.max-attempts=5 最大重试次数spring.rabbitmq.listener.si ...

  3. windows安装docker,快捷启动方式无法启动

    1.在双击“Docker Quickstart Terminal”时弹出缺少快捷方式,截图如下 2.单机快捷方式查看属性,发现配置的git位置是有问题的 现在只需要把git的正确地址配置好就可以了 现 ...

  4. flutter从入门到精通二

    静态方法和静态属性(static): 通过static修饰的方法和属性称为静态方法和静态属性,注意静态方法和静态属性只能通过类名访问,不能通过对象访问. 静态方法不能访问非静态的属性和非静态方法,反正 ...

  5. Maven安装和加速

    Maven安装和加速 下载带二进制源码包,解压 将bin设置为环境变量 加速器,修改conf文件夹下的settings.xml文件,添加如下镜像配置: <mirrors> <mirr ...

  6. zabbix 数据库分表操作

    近期zabbix数据库占用的io高,在页面查看图形很慢,而且数据表已经很大,将采用把数据库的数据目录移到新的磁盘,将几个大表进行分表操作 一.数据迁移: 1.数据同步到新的磁盘上,先停止mysql(不 ...

  7. windows + Eclipse

    https://www.eclipse.org/downloads/index-packages.php 下载好后是一个压缩文件,解压并放到相要存放软件的目录,双击打开解压后的目录下eclipse.e ...

  8. eigenface算法笔记

    昨天看了PCA(PCA算法介绍见上一篇),今天继续看eigenface,在这里把eigenface的过程梳理下: EigenFace本质上讲,是把人脸从像素空间变换到另一个空间,在另一个空间中做相似性 ...

  9. iOS - 图片模糊效果实现

    下面给大家介绍图片模糊效果的三种方法 第一种使用Core Image进行模糊 - (UIImage *)blurryImage:(UIImage *)image withBlurLevel:(CGFl ...

  10. 本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...