当前位置: 首页 > news >正文

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元黑糖颗粒固饮”

相关文章:

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

第一种:escape 和 unescape escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值 它的具体规则是,除了ASCII字母、数字、标点符号" * _ - . /"以外,对其他所有字符进行编码。在u0000到u00ff之间…...

React面向组件编程

往期回顾:# React基础入门之虚拟Dom【一】 面向组件编程 react是面向组件编程的一种模式,它包含两种组件类型:函数式组件及类式组件 函数式组件 注:react17开始,函数式组件成为主流 一个基本的函数组件长这个样子 …...

Linux 多线程同步机制(上)

文章目录 前言一、线程同步二、互斥量 mutex三、死锁总结 前言 一、线程同步 在多线程环境下,多个线程可以并发地执行,访问共享资源(如内存变量、文件、网络连接 等)。 这可能导致 数据不一致性, 死锁, 竞争条件等 问题。 为了解…...

C++学习vector

1,把list的相关函数都实现出来(未完) 2, 运行结果:...

17.3 【Linux】systemctl 针对 service 类型的配置文件

17.3.1 systemctl 配置文件相关目录简介 服务的管理是通过 systemd,而 systemd 的配置文件大部分放置于/usr/lib/systemd/system/ 目录内。但是 Red Hat 官方文件指出, 该目录的文件主要是原本软件所提供的设置,建议不要修改!而要…...

融云获评「创业邦 · 最具创新价值出海服务商」

点击报名,9 月 21 日融云直播课 8 月 22 日 - 23 日,创业邦主办的“2023 DEMO WORLD 全球开放式创新大会暨企业出海未来大会”在上海举行,会上发布了“创业邦 2023 出海企业创新价值 100 强”,融云荣登榜单,获评“最具…...

【中危】Apache XML Graphics Batik<1.17 存在SSRF漏洞 (CVE-2022-44729)

zhi.oscs1024.com​​​​​ 漏洞类型SSRF发现时间2023-08-23漏洞等级中危MPS编号MPS-2022-63578CVE编号CVE-2022-44729漏洞影响广度极小 漏洞危害 OSCS 描述Apache XML Graphics Batik 是一个开源的、用于处理可缩放矢量图形(SVG)格式图像的工具库。 受影响版本中&#xff0…...

AssemblyManager 程序集管理器

AssemblyManager 程序集管理器 程序执行中使用反射对框架的搭建有着强大的影响,如何管理程序集方便使用反射获取类型操作对象是本文章的重点 1.AssemblyInfo 对于一个程序集这里使用一个AssemblyInfo对象进行管理 Assembly :对应的程序集AssemblyTyp…...

几个nlp的小任务(生成式任务——语言模型(CLM与MLM))

@TOC 本章节需要用到的类库 微调任意Transformers模型(CLM因果语言模型、MLM遮蔽语言模型) CLM MLM 准备数据集 展示几个数据的结构...

单元测试用例mock的使用方法

单元测试用例mock的使用方法 提升代码测试覆盖率的关键策略 为什么单元测试是如此重要? 在软件开发中,单元测试是一个关键的环节,可以确保代码的质量和稳定性。而在进行单元测试时,使用mock对象可以帮助我们更好地测试代码逻辑…...

3D步进式漫游能够在哪些行业应用?

VR技术一直以来都是宣传展示领域中的热门话题,在VR全景技术的不断发展下,3D步进式漫游技术也逐渐覆盖各行各业,特别是在建筑、房产、博物馆、企业等领域应用更加广泛,用户通过这种技术能够获得更加直观、生动、详细的展示体验&…...

2023蓝帽杯初赛ctf部分题目

Web LovePHP 打开网站环境,发现显示出源码 来可以看到php版本是7.4.33 简单分析了下,主要是道反序列化的题其中发现get传入的参数里有_号是非法字符,如果直接传值传入my_secret.flag,会被php处理掉 绕过 _ 的方法 对于__可以…...

vue3+ts封装弹窗,分页封装

定义defaultDialog .vue <script lang"ts" setup> import { ref,toRefs,onUpdated } from vue import { ElMessageBox } from element-plus const props defineProps({//接收参数&#xff0c;父组件传的时候用:msg123的形式msg:String,show:{type:Boolean,defa…...

2023-08-30 数据库-并发控制-冲突可串行化调度-是否可串行化检测-优先图-分析

摘要: 将冲突进行可串行化调度, 是解决冲突是一个基本功能. 对于冲突是否可被串行化调度, 比较有效的就是优先图的方法. 本文对检测冲突可串行化调度的优先图做一些分析. 上下文参考: 2023-08-30 数据库-并发控制-冲突可串行化的调度-思考_财阀悟世的博客-CSDN博客 事务的基…...

人员着装识别算法 yolo

人员着装识别系统通过yolo网络模型识别算法&#xff0c;人员着装识别系统算法通过现场安装的摄像头识别工厂人员及工地人员是否按要求穿戴着装&#xff0c;实时监测人员的着装情况&#xff0c;并进行相关预警。目标检测架构分为两种&#xff0c;一种是two-stage&#xff0c;一种…...

Linux:权限

目录 一、shell运行原理 二、权限 1.权限的概念 2.文件访问权限的相关设置方法 三、常见的权限问题 1.目录权限 2.umsk(权限掩码) 3.粘滞位 一、shell运行原理 1.为什么我们不是直接访问操作系统&#xff1f; ”人“不善于直接使用操作系统如果让人直接访问操作系统&a…...

Unity记录4.3-存储-点击Tilemap保存或读取区块

文章首发见博客&#xff1a;https://mwhls.top/4816.html。 无图/格式错误/后续更新请见首发页。 更多更新请到mwhls.top查看 欢迎留言提问或批评建议&#xff0c;私信不回。 汇总&#xff1a;Unity 记录 摘要&#xff1a;点击tilemap&#xff0c;文件 保存/读取 该地图区块数据…...

【小吉测评】哔哩哔哩接入AI?!效果如何?

文章目录 &#x1f384;前言⭐申请方式&#x1f3f3;️‍&#x1f308;注意 &#x1f6f8;简介&#x1f354;上手体验&#x1f6f8;进行数学计算&#x1f970;可以写代码吗 &#x1f384;前言 最近人工智能特别火&#xff0c;chatgpt&#xff0c;Claude2&#xff0c;文心一言等…...

微信开发之一键踢出群聊的技术实现

简要描述&#xff1a; 删除群成员 请求URL&#xff1a; http://域名地址/deleteChatRoomMember 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选…...

基于Spring Boot 的 Ext JS 应用框架之coworkee

Ext JS 官方提供了一个人员管理的完整应用框架 - coworkee。该框架的显示如下: 该框架的布局特点如下: 布局方式: 左右布局, 左侧导航栏默认收合特点:左侧导航区占用空间小, 工作区较大, 适合没有二级导航栏,工作区需要显示的内容较多的系统。如果导航栏是横向底部,就…...

苏姿丰来华,AMD能否借中国市场突破英伟达生态封锁?

苏姿丰访华与AMD战略布局黄仁勋走后第四天&#xff0c;苏姿丰来到上海。上周&#xff0c;黄仁勋在最后一刻挤进特朗普访华队伍&#xff0c;想把英伟达重新带回中国。但他离开北京后&#xff0c;随行企业家很多拿到大单&#xff0c;H200在中国落地仍无明确说法。紧接着&#xff…...

Vue.js 版本全解析与 nvm 环境管理完全指南

前言&#xff1a;为什么需要了解这些&#xff1f;在前端开发的世界里&#xff0c;Vue.js 已经成为最受欢迎的框架之一。但在实际工作中&#xff0c;我们常常会面临两个问题&#xff1a;项目 A 需要用 Vue 2&#xff08;为了兼容 IE11&#xff09;&#xff0c;项目 B 想用 Vue 3…...

美联储加息降息,如何牵动美黄金价格?

在国际金融市场中&#xff0c;美联储的加息、降息政策&#xff0c;是影响美黄金价格最核心的因素之一。很多普通投资者看不懂复杂术语&#xff0c;小编将从机会成本、美元强弱、市场预期三个关键点&#xff0c;让大家轻松看懂金价涨跌逻辑。黄金本身是无息资产&#xff0c;不会…...

AIoT网关50+AI算法硬核加持,AIoT边缘计算赋能千行百业

在物联网与人工智能深度融合的时代&#xff0c;边缘侧的智能感知与决策能力成为行业数字化转型的核心。计讯物联TG465系列5G AIoT边缘计算机&#xff0c;以50成熟视觉AI算法为核心&#xff0c;搭载工业级强悍硬件&#xff0c;打造"AIIoT深度融合"的多模态智能体&…...

Sunshine游戏串流终极指南:5大优化策略实现300%性能提升

Sunshine游戏串流终极指南&#xff1a;5大优化策略实现300%性能提升 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine Sunshine作为一款开源自托管的游戏串流服务器&#xff0c;为Mo…...

FLUX.1-dev-Controlnet-Union:一站式多模态图像控制解决方案,让AI生成更精准可控

FLUX.1-dev-Controlnet-Union&#xff1a;一站式多模态图像控制解决方案&#xff0c;让AI生成更精准可控 【免费下载链接】FLUX.1-dev-Controlnet-Union 项目地址: https://ai.gitcode.com/hf_mirrors/InstantX/FLUX.1-dev-Controlnet-Union 你是否曾经在AI图像生成中遇…...

真・三国无双 起源 官方正版2026最新版pc免费下载(看到请立即转存 资源随时失效)手机版通用

下载链接 破局与重塑&#xff1a;——《真・三国无双 起源》制作团队、玩法架构与竞品技术对标 作为光荣特库摩&#xff08;Koei Tecmo&#xff09;旗下最具代表性的动作砍杀IP最新作&#xff0c;《真・三国无双 起源》&#xff08;Dynasty Warriors: Origins&#xff09;在延…...

多模型选型与成本对比在Taotoken模型广场轻松完成

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 多模型选型与成本对比在Taotoken模型广场轻松完成 对于开发者而言&#xff0c;选择合适的模型并控制调用成本是接入大模型服务时的…...

【深度解析】Antigravity 2.0:从 AI IDE 到 Agent 编排层,Google 开发者工具栈的技术转向

摘要 Google Antigravity 2.0 不再只是一个 AI IDE&#xff0c;而是围绕桌面端、CLI、SDK 与统一 Agent Harness 构建的新一代智能开发工具栈。本文从架构、模型能力、开发流程与工程落地角度解析其技术价值&#xff0c;并给出可复用的 AI Agent API 调用示例。背景介绍&#x…...

华硕笔记本终极性能优化方案:G-Helper轻量级控制工具完全指南

华硕笔记本终极性能优化方案&#xff1a;G-Helper轻量级控制工具完全指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenb…...