js对url进行编码解码(三种方式)

在这里插入图片描述

第一种:escape 和 unescape

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值

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

还有两个点需要注意:

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。
其次,escape()不对 “+” 编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

escape()编码:const time = 2022-01-09
const tile = '63元黑糖颗粒固饮'
let url = "http://localhost:8080/index.html?time="+escape(time)+"&title="+escape(tile)
地址栏显示结果:"http://localhost:8080/index.html?time=2022-01-09&title=63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E"
unescape()解码:let url = "http://localhost:8080/index.html?time="+unescape(2022-01-09)+"&title="+unescape(63%u5143%u9ED1%u7CD6%u9897%u7C92%u56FA%u996E)
地址栏显示结果:"http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮"

第二种:encodeURI 和 decodeURI

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

它用于对URL的组成部分进行个别编码,除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%,,然后用十六进制的转义序列(形式为%xx)对生成的 1 字节、2 字节或 4 字节的字符进行编码。
它对应的解码函数是decodeURI()

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

let url = "http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮"encodeURI()编码:
let encodeURI_url = encodeURI(url) = "http://localhost:8080/index.html?time=2022-01-09&title=63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AE"decodeURI()解码:
decodeURI(encodeURI_url )= “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

第三种:encodeURIComponent 和 decodeURIComponent

与encodeURI()的区别是,它用于对整个URL进行编码。“; / ? : @ & = + $ , #”,这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。
它对应的解码函数是decodeURIComponent()。

let url = "http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮"encodeURIComponent ()编码:
let encodeURIComponent _url = encodeURIComponent (url) = http%3A%2F%2Flocalhost%3A8080%2Findex.html%3Ftime%3D2022-01-09%26title%3D63%E5%85%83%E9%BB%91%E7%B3%96%E9%A2%97%E7%B2%92%E5%9B%BA%E9%A5%AEdecodeURIComponent()解码:
decodeURIComponent(encodeURIComponent _url )= “http://localhost:8080/index.html?time=2022-01-09&title=63元黑糖颗粒固饮”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【模拟】算法实战

文章目录 一、算法原理二、算法实战1. leetcode1576 替换所有的问号2. leetcode495 提莫攻击3. leetcode6 N字形变换4. leetcode38 外观数列5. leetcode1419 数青蛙 三、总结 一、算法原理 模拟就是用计算机来模拟题目中要求的操作,模拟题目通常具有代码量大、操作…

Java稀疏数组

目录 1.稀疏数组 2.稀疏数组的使用 2.1 二维数组转换为稀疏数组 2.2 稀疏数组转换为二维数组 1.稀疏数组 稀疏数组(Sparse Array):当一个数组中的大部分元素为相同的值,可使用稀疏数组来保存该数组,可以将稀疏数组…

记录--怎么实现一个3d翻书效果

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本篇主要讨论以下两种翻书动画的实现: 第一种是整页翻转的效果: 这种整页翻转的效果主要是做rotateY的动画,并结合一些CSS的3d属性实现。 第二种折线翻转的效果&…

北京筑龙受邀出席中物联“采购供应链中国行—走进雄安”活动

日前,“采购供应链中国行—走进雄安”活动在河北雄安新区成功举办,来自30家相关单位的50余名领导和代表参加了本次活动。活动由中国物流与采购联合会公共采购分会主办,中国物流与采购联合会采购委、中国雄安集团有限公司、河北雄安新区招标投…

【数据结构】二叉数的存储与基本操作的实现

文章目录 🍀二叉树的存储🌳二叉树的基本操作🐱‍👤二叉树的创建🐱‍👓二叉树的遍历🎡前中后序遍历📌前序遍历📌中序遍历📌后续遍历 🛫层序遍历&am…

商家必读:影响快递物流速度的这几个关键因素

在这个迅速发展的数字时代,消费者对于快速、高效的购物体验有着越来越高的期望。而作为商家,能否满足顾客对快递速度的要求将直接影响到商家的竞争力和业务发展。今天就和大家聊聊一个在电商行业中至关重要的话题——快递的物流速度对商家的重要性。 首…

Linux——socket网络通信

一、什么是socket Socket套接字 由远景研究规划局(Advanced Research Projects Agency, ARPA)资助加里福尼亚大学伯克利分校的一个研究组研发。其目的是将 TCP/IP 协议相关软件移植到UNIX类系统中。设计者开发了一个接口,以便应用程序能简单地…

【RuoYi移动端】uniApp导入和引用uView2.0插件

一、打开uiew官网 安装 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI,是 uni-app 生态最优秀的 UI 框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水https://uviewui.com/components/install.html 也可直…

hadoop大数据集群中更换磁盘,balance的速度缓慢问题(解决)

hadoop大数据集群中更换磁盘,balance的速度缓慢问题(解决) 看现象只有4个bloucks在执行的 调整参数: 增大配置参数,观察重新负载的速度 修改配置文件 hdfs-site.xml dfs.datanode.balance.max.concurrent.moves100 …

​iOS上架审核宝典:如何避免被拒一次提交成功

Xcode 摘要:本文整理了iOS上架需要注意的事项,以帮助从事iOS开发和App运营的朋友们避免审核被拒的困扰。通过遵循这些指南,我们可以在一次提交中成功地将应用上架,并节省宝贵的时间和精力。 引言: 从事iOS开发和App运…

【SpringBoot】最基础的项目架构(SpringBoot+Mybatis-plus+lombok+knife4j+hutool)

汝之观览,吾之幸也! 从本文开始讲下项目中用到的一些框架和技术,最基本的框架使用的是SpringBoot(2.5.10)Mybatis-plus(3.5.3.2)lombok(1.18.28)knife4j(3.0.3)hutool(5.8.21),可以做到代码自动生成,满足最基本的增删查改。 一、新…

java+ssm+mysql农场信息管理系统

项目介绍: 本系统为基于jspssmmysql的农场信息管理系统,功能如下: 用户:注册登录系统,菜地信息管理,农作物信息管理,种植信息管理,客户信息管理,商家信息管理&#xff…

一个简单的vim例子

一.欢迎来到我的酒馆 在本章节介绍vim工具。 目录 一.欢迎来到我的酒馆二.什么是vim 二.什么是vim 2.1什么是vim vim是一种Linux命令行类型 的文本编辑器。vim指的是"vi improved",意思是vi工具的升级版。vim是基于vi实现的,它提供了…

电工-照明电路施工图

照明电路施工图 上面介绍的电气照明基本电路用作施工的依据是不够的,这是因为图上并没有注明电气元件的规格、型号、安装要求、线路敷设方式以及其他一些特征。作为实际电路安装的依据,必须是根据国家颁布的有关电器技术标准和统一符号绘制的施工图。照…

文本匹配实战系列

引言 本系列文章开始介绍深度学习在文本匹配领域的应用,并且会尝试得到各种模型在给定的数据集上的表现。 深度文本匹配发展比较久,积累了很多文本匹配方法。也有很多的分类方式,一种分类方式是表示型和交互型。 表示型方法 表示型(repre…

kafka架构和原理详解

Apache Kafka 是一个分布式流数据平台,用于高吞吐量、持久性、可扩展的发布和订阅消息。它具有高度的可靠性,被广泛用于构建实时数据流处理、日志收集和数据管道等应用。 基本架构 1. 主题(Topic): 主题是消息的逻辑分类生产者将消息发布到特定的主题中,而消费者可以订阅…

LAMP 配置与应用

LAMP 架构的组成 LAM(M)P: L:linux A:apache (httpd) M:mysql, mariadb P:php, perl, python apache的功能: 第一:处理http的请求、构建响应报文等自身服务; 第二&#xff1a…

Java之API详解之Biginteger类的详解

6 BigInteger类 6.1 引入 平时在存储整数的时候,Java中默认是int类型,int类型有取值范围:-2147483648 ~ 2147483647。如果数字过大,我们可以使用long类型,但是如果long类型也表示不下怎么办呢? 就需要用…

低代码是什么?能做什么?

2014 年全球权威咨询机构 Forrester 在报告中首次引入了低代码的概念,放眼彼时的中国市场,低代码这一名词还鲜为人知。随着国家积极推动数字化发展,越来越多的企业投入到了数字化经济的建设中,低代码也在这样的大环境中快速成长。…

gitcode中删除已有的项目

镜像地址: https://www.jianshu.com/p/504c1418adb7?v1693021320653 扩展阅读 如何在GitLab中删除一个项目 https://www.codenong.com/cs106866762/ 简介: 如何在GitLab中删除一个项目 最近GIT上建了太多项目。想清一下,就在网上查了查…