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

素颜马尾好姑娘i 2024-03-27 15:16 12阅读 0赞

## 前言 ##

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

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

效果如下所示：

![在这里插入图片描述][6a714649485d44afb7d556513ec7cbbd.png]

[6a714649485d44afb7d556513ec7cbbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5b4f1aa4cdd34dacab5764215c15ef26.png