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. windows下使用 fdfs_client 上传文件(转)

    https://www.cnblogs.com/kindleheart/p/10134502.html 注意:client = Fdfs_client(r"绝对路径"),一定要是绝 ...

  2. 怎样修改vim的缩进

    默认vim的tab缩进是八个空格, 太长了, 需要改短一点. 第一步: 找到vimrc文件所在位置 # find / -name vimrc 第二步: 找到以后用vim打开vimrc文件并增加下面两行 ...

  3. interface Part2(定义接口)

    一. 在 C# 语言中,类之间的继承关系仅支持单重继承,而接口是为了实现多重继承关系设计的. 二. 一个类能同时实现多个接口,还能在实现接口的同时再继承其他类,并且接口之间也可以继承. 三. 无论是表 ...

  4. jQuery遍历(1)

    jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. 图示解释: 举例: jQuery p ...

  5. 碰撞器Colider 触发器

    碰撞器可以让所依附的游戏物件对其他碰撞体产生碰撞行为(其他游戏物体必须具有Rigidbody组件) 对于不规则形状的物体,通常使用组合式碰撞体而不是网格碰撞器,以为网格碰撞器以模型的网格为基础,更为复 ...

  6. github发布版本

    github发布版本后再pacakgist能拉取到需要发布版本 本地 mac@macdeMacBook-Pro:/www/tool$ git add . mac@macdeMacBook-Pro:/w ...

  7. djangoNotes

    学员管理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. 【nodejs代理服务器四】代理服务器增加频繁访问的ip加入黑名单

    问题 渗透者在扫站的时候会频繁请求,我们可以做一些策略来封堵这些频繁访问的ip,把ip加入黑名单. 策略 2秒之内访问次数超过100,加入黑名单. 实现思路 初次访问把访问Ip作为键,访问ip,时间, ...

  9. springboot系列(十)springboot整合shiro实现登录认证

    关于shiro的概念和知识本篇不做详细介绍,但是shiro的概念还是需要做做功课的要不无法理解它的运作原理就无法理解使用shiro: 本篇主要讲解如何使用shiro实现登录认证,下篇讲解使用shiro ...

  10. imx6q 启动logo

    转:https://wenku.baidu.com/view/81fa0f3982c4bb4cf7ec4afe04a1b0717fd5b30e.html?rec_flag=default&sx ...