广告位联系
返回顶部
分享到

js中如何对url进行编码和解码

JavaScript 来源:互联网 作者:佚名 发布时间:2022-11-12 20:41:27 人浏览
摘要

js 对url进行编码和解码 三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号; / ? : @ = + $ , #,也不进行

js 对url进行编码和解码

三种编码和解码函数

encodeURI和 decodeURI

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

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

encodeURIComponent和decodeURIComponent(推荐使用)

它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码

escape 和 unescape

对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。

js url二次编码和解码

问题

今天遇到了一个奇怪的问题:在JS中用decodeURI()解析完一串URL编码后发现它依旧是URL编码,看的我一脸懵逼!最后发现参数里面竟然是一个URL二次编码!

类似下面这种形式:

"%25E6%2588%2591%25E7%2588%25B1%25E4%25BD%25A0"

也就是说也解码两次才能得到原码,如下:

1

2

3

4

//编码结果:%25E6%2588%2591%25E7%2588%25B1%25E4%25BD%25A0

encodeURI(encodeURI('我爱你'))

//解码结果:我爱你

decodeURI(decodeURI("%25E6%2588%2591%25E7%2588%25B1%25E4%25BD%25A0"))

URL编码解码原理

URL编码原理:

这个百度百科上解释的就很好:URL编码就是一个字符ASCII码的十六进制。不过稍微有些变动,需要在前面加上“%”。比如:“\”,它的ASCII码是92,92的十六进制是5c,所以“\”的URL编码就是%5c。

URL二次编码会对生成的编码再做一次编码,还拿“\”为例,一次编码后是“%5c”,再对“%5c”进行编码得到:“%255c”。

二次编码其实就是对%做了编码,后面的字母和数字没变,“%”的URL编码是“%25”,所以二次编码全都是已%25开头的。

注意:encodeURI()仅会将特殊字符转化成URL编码形式,特殊的字符:就是那些不是简单的七位ASCII,如汉字,中文标点,当然也包括%[] {}|等特殊字符。例如:

1

2

3

4

5

6

//结果:123abcABC

encodeURI("123abcABC")

//结果:"520%E9%9B%AA%E7%8B%90"

encodeURI("520雪狐")

//结果:"%25%7C%5B%5D%7B%7D"

encodeURI("%|[]{}")

URL编码原理:就是编码的逆过程,不再赘述。

注意:decodeURI也仅对URL编码解码,普通字符解码后依旧是普通字符,例如:

1

2

3

4

5

6

//结果:"234"

decodeURI('234')

//结果:我爱你

decodeURI("%E6%88%91%E7%88%B1%E4%BD%A0")

//结果:我爱你

decodeURI("我爱你")


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://primarycolor.blog.csdn.net/article/details/111172160
相关文章
  • 实时通信Socket io的使用介绍

    实时通信Socket io的使用介绍
    最近在工作中,遇到了一个需求,需要和后台服务实时通信,获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个
  • js中如何对url进行编码和解码
    js 对url进行编码和解码 三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中
  • React RenderProps模式超详细介绍
    render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。 如果一个组件有一个render属性,并且这个
  • Vue中ref、reactive、toRef、toRefs、$refs的基本用法总

    Vue中ref、reactive、toRef、toRefs、$refs的基本用法总
    一、ref reactive 1.1.为什么需要ref、reactive ??? setup函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变
  • Javascript如何实现对象扁平化实例介绍

    Javascript如何实现对象扁平化实例介绍
    数组扁平化相信大家已经耳熟能详了,在被面试官问到如何实现数组扁平化你就偷着乐吧,但是相信有不少大佬在面试一些国内顶尖的大厂
  • Immer功能最佳实践示例教程

    Immer功能最佳实践示例教程
    一、前言 Immer 是mobx的作者写的一个 immutable 库,核心实现是利用 ES6 的 proxy,几乎以最小的成本实现了 js 的不可变数据结构,简单易用、体
  • Ant Design 的Bug修复示例
    我在工作中大量使用Ant Design,它为我省去了很多重复劳动,所以有空的时候,我也会为Ant Design做一些微小的贡献。 本文详细描述了我处理
  • AntDesignPro使用electron构建桌面应用示例
    注意事项声明 所有node包必须使用npm安装不可使用cnpm, 使用cnpm安装的node包会导致打包时间无限可能 具体区别查看使用npm和cnpm安装的包结构
  • vue el-switch初始值(默认值)不能正确显示状态问题

    vue el-switch初始值(默认值)不能正确显示状态问题
    el-switch 初始值(默认值)不能正确显示状态 先去检查一下接口返回格式 如果是字符串 不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
  • 微信小程序跳转外部链接的实现方法

    微信小程序跳转外部链接的实现方法
    微信小程序跳转外部链接 在开发小程序过程中,我们可能会有这样的需求,在小程序中打开H5或者外部链接 实现方法如下: 1、配置业务域
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计