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

【前端笔试题一】:解析url路径中的query参数

前言

本文记录下在笔试过程中的前端笔试编程题目,会持续更新

1. 题目:

解析 url 路径中的 query 参数,比如:‘http://building/#/skeleton?serialNumber=2023020818332821073&jobNo=210347&target=%7B%22a%22%3A%22b%22%2C%22c%22%3A%22d%22%7D&flag=tudoFlag’

需要将其转换成的格式如下:

{serialNumber: "2023020818332821073",jobNo: "210347",target: {a: "b",c: "d"}
}

2. 思路

对于 url,我们需要考虑的是:URL 是笔试时题目中给定的,还是需要我们自己获取?

如果是题目中给定的,我们直接拿来用即可,

如果题目中没给,我们则需要使用 window.location.search 进行获取,

其次,query 参数 指的是 URL 中 ? 后面的部分,且格式为: “key=value” ,所以需要对 URL 进行分割

然后再次以 & 进行分割,返回的是一个数组,数组每一项,= 前面的是值,后面的是键。

对该数组进行遍历,对每一个元素以 = 进行分割。

注意: URL中很多内容会出现 % 这样的内容,这实际上是对参数进行了URI编码

对于这类的编码参数如何处理?自然是需要进行解码decodeURIComponent,并且需要 JSON.parse()

区别是否是 URI编码的特征就是:是否包含 %

3. 代码

const url = 'http://building/#/skeleton?serialNumber=2023020818332821073&jobNo=210347&target=%7B%22a%22%3A%22b%22%2C%22c%22%3A%22d%22%7D&flag=tudoFlag'const getQueryString = (url) => {let obj = {}let arr = url.split('?')[1]let newArr = arr.split('&')newArr.forEach((item) => {let key = item.split('=')[0]let value = item.split('=')[1]if(value.indexOf('%') == -1) {// 不存在 % ,obj[key] = value} else {// 存在,需要进行解码obj[key] = JSON.parse(decodeURIComponent(value))}})return obj
}console.log(getQueryString(url))

效果如下所示:

在这里插入图片描述

相关文章:

【前端笔试题一】:解析url路径中的query参数

前言 本文记录下在笔试过程中的前端笔试编程题目,会持续更新 1. 题目: 解析 url 路径中的 query 参数,比如:‘http://building/#/skeleton?serialNumber2023020818332821073&jobNo210347&target%7B%22a%22%3A%22b%22%2C…...

K_A12_001 基于STM32等单片机采集火光火焰传感参数串口与OLED0.96双显示

K_A12_001 基于STM32等单片机采集火光火焰传感参数串口与OLED0.96双显示一、资源说明二、基本参数参数引脚说明三、驱动说明IIC地址/采集通道选择/时序对应程序:四、部分代码说明1、接线引脚定义1.1、STC89C52RC火光火焰模块1.2、STM32F103C8T6火光火焰模块五、基础知识学习与相…...

Java基础42 枚举与注解

枚举与注解一、枚举(enumeration)1.1 自定义类实现枚举1.2 enum关键字实现枚举1.2.1 enum的注意事项1.2.2 enum的使用练习1.2.3 enum的常用方法1.2.4 enum的使用细节及注意事项1.2.5 enum练习二、注解(Annotation)2.1 Override&am…...

shell的变量和引用

文章目录二、变量和引用2.1 什么是变量2.2变量的命名2.3 变量的类型2.3.1 根据数据类型分类2.3.2 根据作用域分类2.4 变量的定义2.5 shell中的引用2.6 变量的运算练习:二、变量和引用 在程序设计语言中,变量是一个非常重要的概念。也是初学者在进行Shel…...

基于PHP的招聘网站

摘要在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括在线招聘的网络应用,在外国在线招聘已经是很普遍的方式,不过国内的在线招聘可能还处于起步阶段。招聘网站具有招聘信息功能的双向选择,…...

轻松使用 Python 检测和识别车牌(附代码)

车牌检测与识别技术用途广泛,可以用于道路系统、无票停车场、车辆门禁等。这项技术结合了计算机视觉和人工智能。 本文将使用Python创建一个车牌检测和识别程序。该程序对输入图像进行处理,检测和识别车牌,最后显示车牌字符,作为…...

DVWA—CSRF-Medium跨站请求伪造中级

注意: 1、这里对XSS(Stored)关卡不熟悉的可以从这里去看http://t.csdn.cn/ggQDK 2、把难度设置成 Medium 一、这一关同样我们需要埋下伏笔,诱使用户点击来提交,首先从XSS(Stored)入手。 注意:在前面介绍…...

【电商】后台订单生成

结合商品流转的电商系列介绍了一些了,商品已经采购入库、价格税率设置好了、活动及相关模板也已经准备完毕,下面就应该上架销售了,现在接着聊下订单的生成。 订单从产生到最终的关闭需要经历很多的环节,订单也是电商系统的核心数据…...

作为公司,这个5款在线软件工具赶紧安利起来!

2023年了 ,您的企业还没使用在线软件工具吗?自从用了在线工具之后,感觉打开了新办公世界的大门,效率蹭蹭蹭地往上涨啊。对于喜欢追求效率和便捷的我来说,在线实在是太棒了!今天安利几个非常不错的在线软件工…...

面试(七)为什么一般希望将析构函数定义为虚函数

class B { public:~B() // 基类析构函数不为虚函数{cout << "B::~B()" << endl;} };class D : public B { public:~D(){cout << "D::~D()" << endl;} };void Test(B* t) {delete t;t nullptr; }int main() {B *pb new B;Test…...

MySQL必会四大函数-时间函数

一、时间日期获取函数 获取当前日期&#xff08;date&#xff09;函数&#xff1a;curdate() mysql> select curdate(); 2023-02-09 获取当前时间&#xff08;time&#xff09;函数&#xff1a;curtime() select curtime(); 08:49:27 获取当前时间戳&#xff08;date &…...

震惊!邻桌的程序猿做可视化报告竟然比我还快,带着好奇心我打开了他的电脑,发现惊天秘密,原因竟是...

其实&#xff0c;本文就是想分享一个做可视化的捷径&#xff01; 制作可视化的方式有千千万。 Excel 控若能轻车熟路驾驭 VBA&#xff0c;能玩出各种花来&#xff0c;再不济借助图表插件外援也能秒杀一众小白选 手。 会编程的&#xff0c;Echarts 几十行代码&#xff0c;分分…...

mathtype7与word冲突,无法安装,不显示工具栏的问题解决

首先无法安装&#xff0c;或安装出错时&#xff0c;要清理注册表防止以后再次出现该问题&#xff0c;以此记录留作备份。打开注册表的方法是键盘winr键同时按&#xff08;win就是Alt旁边像窗户图标的键&#xff09;&#xff0c;正常的话会跳出一个叫“运行”的家伙&#xff0c;…...

IBM AIX 升级Openssh 实现篇(编译安装)

升级成功佐证 !!!本文所有内容仅作参考,请在测试环境中具体测试完毕后才能应用于生产环境!!! [1]备份和恢复方案 开启telnet 服务,防止ssh 掉线后无法重连维护。在修复漏洞后关闭telnet。 备份该服务相关的所有文件,以便恢复。 root@TEST:/etc# vi inetd.conf #ftp…...

linux的睡眠框架及实现

睡眠 4 种模式&#xff1a;S2I (Suspend-to-Idle)&#xff1a; 挂起系统&#xff0c;IO进入低功耗模式。需配置CONFIG_SUSPEND。Standby&#xff1a;执行S2I后&#xff0c;把AP (nonboot CPU) 离线。除了CONFIG_SUSPEND的支持外&#xff0c;还需要向suspend子系统注册&#xff…...

Java面试知识点

工作也有好些年了&#xff0c;从刚毕业到前几年看过无数的面试题&#xff0c;总想着自己写一个面试总结&#xff0c;随着自我认识的变化&#xff0c;一些知识点的理解也越来越不一样了。写下来温故而知新。很多问题可能别人也总结过&#xff0c;但是答案不尽相同&#xff0c;如…...

PTA Advanced 1159 Structure of a Binary Tree C++

目录 题目 Input Specification: Output Specification: Sample Input: Sample Output: 思路 代码 题目 Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and inorder traversal sequences, a binary tree can be un…...

CDN绕过技术总汇

注 本文首发于合天网安实验室 首发链接&#xff1a;https://mp.weixin.qq.com/s/9oeUpFUZ_0FUu6YAhQGuAg 近日HVV培训以及面试&#xff0c;有人问了CDN该如何绕过找到目标真实IP&#xff0c;这向来是个老生常谈的问题&#xff0c;而且网上大多都有&#xff0c;但是有些不够全面…...

算法训练营DAY51|300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

本期是求子序列的新的一期&#xff0c;题目前两道有一些相似之处&#xff0c;思路差不多&#xff0c;第三道有一点难度&#xff0c;但并不意味着第一道没有难度&#xff0c;没有做过该类型题的选手&#xff0c;并不容易解出题解。 300. 最长递增子序列 - 力扣&#xff08;Leet…...

mac:彻底解决-安装应用后提示:无法打开“XXX”,因为无法验证开发者的问题;无法验证此App不包含恶意软件

mac从浏览器或其他电脑接收了应用&#xff0c;但是打开报错 目录报错解决办法一次性方法永久解决方法验证恢复应用验证报错 截图如下&#xff1a; 错误信息 无法打开“XXX”&#xff0c;因为无法验证开发者的问题&#xff1b;无法验证此App不包含恶意软件 解决办法 一次性方…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...