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

最新推荐文章于 2024-12-10 22:58:09 发布

小刘加油！

最新推荐文章于 2024-12-10 22:58:09 发布

阅读量3.7k

点赞数 4

分类专栏：前端笔试题文章标签：前端 javascript 面试题面试编程题

本文链接：https://blog.csdn.net/qq_41131745/article/details/128956774

版权

前端笔试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何解析URL路径中的query参数，将其转换为JSON对象。首先确定URL来源，然后对URL进行分割提取query部分，再按&分隔得到键值对，处理编码参数并使用decodeURIComponent和JSON.parse进行解码。提供的代码示例展示了整个转换过程。

摘要由CSDN通过智能技术生成

前言

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

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))

效果如下所示：

在这里插入图片描述