javascript 中的 URL 解码

news2024/12/26 12:25:16

文章目录

    • 需要URL编解码
    • JavaScript 中的 URL 解码
      • 使用 unescaped() 方法解码编码的 URL
      • 使用 decodeURI() 方法解码编码的 URL
      • 使用 decodeURIComponent() 方法解码编码的 URL
    • 总结


本文着眼于 URL 解码以及如何使用 JavaScript 对编码的 URL 进行解码。


需要URL编解码

URL 应具有某些字符。 URL 可以包含 US-ASCII 字符,例如从 0 到 9 的数字和 a-z 中的字符,以及一些特殊字符。

但是,某些 URL 可以包含 US-ASCII 中没有的字符或特殊字符。 那就是我们需要URL编码的时候。

URL 编码使我们能够拥有正确格式的 URL,换句话说,可接受的形式,即使它具有 US-ASCII 表之外的特殊字符。

请参考以下示例。

http://example.us/url encoding

在上面的 URL 中,URL 和编码之间存在间隙/空格,这对于 URL 格式来说是不可接受的。 在对 URL 进行编码时,空隙会被一些特殊字符所取代,URL 就会变成正确的格式。

我们可以使用 URL 解码来解码编码的 URL。 这个过程是 URL 编码的逆过程。

当我们解码 URL 时,我们可以以更易读的方式获得 URL。


JavaScript 中的 URL 解码

在 JavaScript 中,可以通过三种方法对编码的 URL 进行解码。

  1. unescape() 方法
  2. decodeURI() 方法
  3. decodeURIComponent() 方法

使用 unescaped() 方法解码编码的 URL

此方法在 JavaScript 中已弃用,这意味着该函数未在 JavaScript 中使用。 我们可以使用其他两个选项来解码编码的 URL,而不是使用此函数。

使用 decodeURI() 方法解码编码的 URL

在 JavaScript 中,我们有 encodeURI() 方法来编码 URL 和 decodeURI() 来解码编码的 URL。 encodeURI() 方法对 URL 地址进行编码,不包含地址的域相关部分(HTTPS、域名等)。

decodeURI()encodeURI() 的逆向方法,对编码后的带有正则字符的URL进行解码。 下面是 decodeURI()encodeURI() 方法的语法。

语法:

// Syntax for encoding
encodeURI(content to encode)

// Syntax for decoding
decodeURI(content to decode)

要查看解码过程,我们需要有一个编码的 URL。 让我们来看一个示例 URL。

http://example.us /url encoding

作为第一步,我们应该将 URL 作为下面的字符串分配给变量。

let exURL = " http://example.us /url encoding";

然后我们使用 encodeURI() 方法对其进行编码,并使用 console.log() 方法进行打印。

let encodedURL = encodeURI(exURL);
console.log(encodedURL);

在上面的语句中,我们将 encodeURI() 方法分配给了一个名为 encodedURL 的变量。 换句话说,我们可以直接使用 console.log() 函数中的 encodeURI() 函数,如下所示。

console.log(encodeURI(exURL));

两种方式都给我们相同的结果,所以让我们继续第一个路径。 现在我们完整的 JavaScript 代码应该是这样的。

完整代码:

let exURL = "http://example.us /url encoding";
let encodedURL = encodeURI(exURL);
console.log(encodedURL);

输出:

使用 encodeURI() 方法

现在让我们使用 decodeURI() 方法对其进行解码。 首先,我们可以将 decodeURI() 过程分配给另一个变量,如下所示。

let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);

输出:

使用 decodeURI() 方法

如您所见,我们将从上述过程中获取解码后的 URL。

使用 decodeURIComponent() 方法解码编码的 URL

decodeURIComponent() 方法是 encodeURIComponent() 方法的反向方法。 encodeURIComponent() 方法使用其中与域相关的部分对 URL 地址进行编码。

此外,它还对一组特殊字符进行编码,而 encodeURI() 方法不会这样做。 这是唯一字符列表。

使用 decodeURIComponent() 方法解码编码的 URL

decodeURIComponent() 方法使用相关字符和符号对编码的 URL 进行解码。

句法:

// Syntax for encoding
encodeURIComponent(content to encode)

// Syntax for decoding
decodeURIComponent(content to decode)

让我们举一个例子 URL。

https://stackoverflow.com/url+encoded string+in javascript

在上面的示例中,URL 中有空格、/、: 和 + 标记。 让我们使用 encodeURIComponent() 方法对 URL 进行编码。

let exURL = "https://stackoverflow.com/url+encoded string+in javascript";
let encoded = encodeURIComponent(exURL);
console.log(encoded);

输出:

使用 encodeURICompoenent() 方法

现在让我们尝试使用 decodeURIComponent() 方法对其进行解码,如下所示。

let decoded = decodeURIComponent(encoded);
console.log(decoded);

如上所述,我们已将 decodeURIComponent() 方法分配给一个变量。 使用 console.log() 方法打印它。

输出:

使用 decodeURIComponent() 方法

如您所见,我们编码的 URL 已作为解码 URL 给出。

完整代码:

let exURL = "https://stackoverflow.com/url+encoded string+in javascript";

let encoded = encodeURIComponent(exURL);
console.log(encoded);

let decoded = decodeURIComponent(encoded);
console.log(decoded);

总结

这篇文章简单介绍了 JavaScript,并讲授了 URL 编码和解码是什么。 然后我们主要讨论了两个方法:decodeURI()decodeURIComponent() ,并给出了一些例子。

两种方法都以两种方式工作,根据需要使用合适的方法。 unescape() 方法最近已被弃用,取而代之的是,我们可以使用其他两种方法作为解决方案。

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

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

相关文章

政企HTTPS加密国产化替代的四要素

信创产业是数字经济、信息安全发展的基础,也是“新基建”的重要内容,将成为拉动中国经济增长的重要抓手之一。随着国资委79号文的发布,国央企落实信息化系统的信创国产化改造的步伐加快,贯彻“28N”战略,从党政机关扩展…

Doris学习笔记

1.数据模型 数据模型 - Apache Doris 1.1 Aggregate 模型(聚合) 可以发现,user_id、date、age ...等没有设置 AggregationType, 那么这几个字段就成了一个key了。设置了 AggregationType 字段,说明该列的属性已经成value了。 我们导入一张…

Linux·Binder机制原理

目录 前言 目录 1. Binder到底是什么? 2. 知识储备 2.1 进程空间划分 2.2 进程隔离 & 跨进程通信( IPC ) 2.5 内存映射 3. Binder 跨进程通信机制 模型 3.1 模型原理图 3.3 模型原理步骤说明 3.4 额外说明 4. Binder机制 在An…

自学黑客(网络安全),一般人我劝你还是算了

写在开篇 笔者本人 17 年就读于一所普通的本科学校,20 年 6 月在三年经验的时候顺利通过校招实习面试进入大厂,现就职于某大厂安全联合实验室。 我为啥说自学黑客,一般人我还是劝你算了吧!因为我就是那个不一般的人。 ​ 首先我…

elementui tree 支持虚拟滚动和treeLine (下)

​ 由于我之前没有发布过npm 包,这里还得现学一下。 参考资料: 链接: 如何写一个vue组件发布到npm,包教包会,保姆级教学链接: vue组件发布npm最佳实践 按照上面的步骤,我通过 vue-sfc-rollup 生成了项目,…

六级备考8天|CET-6|阅读强化|16:00~17:20

调整做题顺序:仔细阅读——>长篇阅读(信息匹配)——>翻译——>选词填空 顺关系 or 反关系 正态度 or 负态度 阅读要有针对性 理解要有空白性 2)高大上的思维来自于中文的语言特点 练习 第一段:例子,无观点&am…

微伴助手如何增加客户积分?如何自动给客户添加企业标签?

微伴助手是一款企业微信第三方应用,已经为电商、教育、金融、保险、医疗等机构提供技术支持,适用于引流获客、客户意向跟进、销售转化、社群运营等全方位营销场景,旨在帮助企业构建高转化率的私域流量池。 微伴助手基于企业微信开放的接口&a…

adb shell 调试 Android 串口 百度AI也很

在 Android 平台上进行串口调试需要使用 Android Debug Bridge (ADB) 工具。ADB 是一个命令行工具,可以通过 USB 连接 Android 设备,并执行各种命令来调试应用程序。 以下是使用 ADB shell 进行 Android 串口调试的步骤: 连接 Android 设备…

【2023最全教程】什么是自动化测试框架?熬夜7天整理出这一份3000字超全学习指南

所有软件在提供给用户之前都必须经过测试。软件测试是开发生命周期中必不可少的一步因为它确保用户必须收到符合其开发目的的高质量产品。每个企业都优先考虑测试;因此,大多数人更愿意从手动测试转向自动化。因此,自动化测试框架是任何软件测试过程的基础…

安全测试网站-DWVA下载安装启动

参考:DVWA下载、安装、使用(漏洞测试环境搭建)教程 - 付杰博客 (fujieace.com) DVWA全称为Damn Vulnerable Web Application,意为存在糟糕漏洞的web应用。它是一个基于PHP/MySQL开发的存在糟糕漏洞的web应用,旨在为专…

华为OD机试真题B卷 Java 实现【自守数】,附详细解题思路

一、题目描述 自守数是指一个数的平方的尾数等于该数自身的自然数。例如:25^2 625,76^2 5776,9376^2 87909376。请求出n(包括n)以内的自守数的个数。 数据范围: 1≤n≤10000 二、输入描述 int型整数。 三、输出描述 n以内…

看板可视化工作流的7个步骤

工作流是任务或产品从工作开始到完成所经历的一系列特征步骤。 人脑处理视觉图像的能力比文本快 60,000 倍,这意味着我们消费图像等视觉内容的速度比文本快得多。在看板中,工作流的可视化意味着将独特的工作步骤映射到看板的列中,并在工作项…

【数据结构与算法】02 栈 (栈的多重含义,静态、动态数组栈(顺序栈),链式栈,双端栈,括号匹配)

一、栈的多重含义1.1 硬件栈1.2 运行时栈1.3 软件栈1.4 技术栈1.5 TCP/IP协议栈 二、数据结构中的栈2.1 概念2.2 栈的操作2.3 数组栈(顺序栈)2.31 数组栈特性2.32 C语言实现▶ 静态数组栈▶ 动态数组栈 2.4链式栈2.41 链式栈特性2.42 C语言实现 三、进阶…

【2023最新教程】一文3000字从0到1教你做app自动化测试(保姆级教程)

一、什么是App自动化?为什么要做App自动化? App自动化是指给 Android或iOS上的软件应用程序做的自动化测试。手工测试和自动化测试的对比如下: 手工测试优势:不可替代、发现更多bug、包含了人的想象力与理解力。 注意&#xff0c…

嵌入式 - UART介绍

概述 嵌入式系统经常需要集成电路之间的通信。举个例子,一个数字温度传感器向主控芯片报告房间的环境温度。通常情况,这种数据会通过一个串行接口来传输。 那么,什么是串行接口? 在最基本的角度来说,串行接口是一个移…

微信原生小程序自定义顶部导航

都2023了,自定义顶部导航应该不是什么新鲜事了,这里只是简单记录下 微信自己也提供了自定义顶部导航navigation-bar,大概看了下,可配置的也不少,所以看需求了,如果简单可以采用微信提供的,老规矩…

【Mysql】安装和基础环境配置

本文首发于 慕雪的寒舍 在本地安装mysql,以mariadb为例。 所有命令都需要在root下面执行or使用sudo 系统 CentOS 8 1.安装mariadb开发包 yum install -y mariadb yum install -y mariadb-server yum install -y mariadb-devel2.修改配置文件中的编码 为了保证对…

亚马逊美国站 儿童陀螺玩具CPC认证 陀螺的详细介绍 CPC认证方案的流程

什么是陀螺陀螺指的是绕一个支点高速转动的刚体。陀螺是中国民间最早的娱乐工具之一.形状上半部分为圆形,下方尖锐。从前多用木头制成,现代多为塑料或铁制。玩时可用绳子缠绕,用力抽绳,使直立旋转。或利用发条的弹力旋转。传统古陀…

多通道高通量实时处理单元详细方案设计报告

前端时间,做了一个项目,编写了相关的技术方案设计报告,项目的技术细节虽不能透漏,但这个设计报告做的很好,在此,贡献出来,给有相关需求的同事们做个参考,整个报告84页,2万…

JMeter 测试笔记(二):组件及运行原理

说组件之前,我们先来看一下JMeter的结构图,如下图,把JMeter拆解为三个维度,X空间5个维度,Y空间2个维度,Z空间1个维度。 介绍 X1~X5是负载模拟的整个过程,Y1是负载模拟部分,这部分主…