js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

 更新时间:2023年04月17日 08:48:52   作者:Newbie_小白  
这篇文章主要介绍了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

js 对文字进行编码涉及2个函数:encodeURI,encodeURIComponent,相应2个解码函数:decodeURI,decodeURIComponent

用来编码和解码URI的

统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串。

encodeURI 和 decodeURI 函数操作的是完整的 URI;这俩函数的URI 中的任何保留字符都有特殊意义,所有不会编码它们。

encodeURI主要用于直接赋值给地址栏时候:

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件;encodeURIComponent 的作用:将文本字符串编码为一个有效的统一资源标识符 (URI)。这俩函数假定任何保留字符都代表普通文本,所以必须编码它们,所以它们(保留字符)出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

 原因:如果 username = 'a&foo=boo' 而不用 encodeURIComponent 的话,整个参数就成了 name=a&foo=boo, 这样 CGI 就获得两个参数 name 和 foo. 这不是我们想要的。

Javascript 里还有个同样功能的函数 encodeURI, 但是此方法不会对下列字符进行编码:":"、"/"、";" 和 "?"。

传递参数时需要使用encodeURIComponent

这样组合的url才不会被#等特殊字符截断。

例如:

<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7& u='+encodeURIComponent(" rel="external nofollow"  rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a& gt;');</script>
<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7& u='+encodeURIComponent(" rel="external nofollow"  rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a& gt;');</script>

decodeURI()和decodeURIComponent()这两个函数可以对特定函数生成的密码字符串进行解密操作,就可以生成为未解密的字符串,比较实用,

decodeURI()定义和用法

decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码。

语法:decodeURI(URIstring)

参数 描述:URIstring 必需。一个字符串,含有要解码的 URI 或其他要解码的文本。

返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

decodeURIComponent()定义和用法

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

语法:decodeURIComponent(URIstring)

参数 描述:URIstring 必需。一个字符串,含有编码 URI 组件或其他要解码的文本。

返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

URL传参中的字符加密及解码方式

encodeURI/decodeURI、encodeURIComponent/decodeURIComponent 这四个方法的用处

都是用来编码和解码URI的。

encodedURI

函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)。encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

decodeURI

函数解码一个由encodeURI 先前创建的统一资源标识符(URI)或类似的例程。

encodeURIComponent

是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有

decodeURIComponent

方法用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符(URI)。

若解码字符串包含%,则会报错

原因如下: 

escape/unescape函数对字符串进行编码。

此函数使字符串具有可移植性,这样它就可以通过任何网络传输到任何支持 ASCII 字符的计算机。

此函数对特殊字符进行编码,但以下字符除外: * @ - _ + . /

心得:

当你需要转码/解码的URL是需要一个完整、可直接访问的URL时,应该使用encodeURI/decodeURI; 当你需要转码/解码的URL是作为链接的一部分,比如用作参数的情况,应该使用encodeURIComponent/decodeURIComponent,针对用encodeURIComponent/decodeURIComponent时解析‘%’报错推荐使用escape/unescape函数可以避免页面报错

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解json串反转义(消除反斜杠)

    详解json串反转义(消除反斜杠)

    这篇文章主要介绍了详解json串反转义(消除反斜杠),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法

    PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法

    这篇文章主要介绍了PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法,造成这个问题的原因是PHP上传大小限制为2MB,修改PHP.ini配置即可解决这问题,需要的朋友可以参考下
    2015-03-03
  • js实现淘宝浏览商品放大镜功能

    js实现淘宝浏览商品放大镜功能

    这篇文章主要为大家详细介绍了js实现淘宝浏览商品放大镜功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Bootstrap基本插件学习笔记之模态对话框(16)

    Bootstrap基本插件学习笔记之模态对话框(16)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之模态对话框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js匿名函数使用&传参(实例)

    js匿名函数使用&传参(实例)

    下面小编就为大家带来一篇js匿名函数使用&传参(实例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 获取DOM对象的几种扩展及简写

    获取DOM对象的几种扩展及简写

    获取DOM对象的几种扩展及简写...
    2006-10-10
  • 使用html2canvas截图不全问题的解决办法

    使用html2canvas截图不全问题的解决办法

    这篇文章主要给大家介绍了关于使用html2canvas截图不全问题的解决办法,最近在项目中遇到一个需求,需要提供网页截图的功能,这里将遇到的问题分享给大家,需要的朋友可以参考下
    2023-07-07
  • 超越Jquery_01_isPlainObject分析与重构

    超越Jquery_01_isPlainObject分析与重构

    isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象(通过 {} 或者 new Object 创建的)。
    2010-10-10
  • 前端获取excel表格数据并在浏览器展示方法实例

    前端获取excel表格数据并在浏览器展示方法实例

    在开发过程中,难免会碰到用前端来处理excel文件的需求,这篇文章主要给大家介绍了关于前端获取excel表格数据并在浏览器展示方的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • js使用xlsx读取excel文件的详细步骤

    js使用xlsx读取excel文件的详细步骤

    读取excel文件是日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于js使用xlsx读取excel文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论