获取url的目标参数

面试中经常被问到，汇总下吧。

获取URL？后面的部分

有四种方法：

1. 正则：

const url = 'http://aaa?query1=1'
let reg = new RegExp(/\?(.*)$/, 'i')
console.log(url.march(reg)[1])
// query1=1

2. indexOf

const url = 'http://aaa?query1=1'
let idx = url.indexOf('?')
console.log(url.slice(idx))
// query1=1

3. 转化成URL对象获取

const url = 'http://aaa?query1=1'
let urlObj = new URL(url)
console.log(urlObj.search.slice(1))
// query1=1

4. 获取当前地址栏：window.location.search

注意：第3点和第四点有个问题：当URL带有#时，此时通过 window.location.search 获取到的参数为空，因为hash会将url中第一个#后的内容都作为hash内容，所以search为空了，很坑爹。

获取URL目标参数

三种方法

1. 通过正则获取：

function getUrlParams (url, name) {
	// let url = url.split('?')[1] 问题同上注意，可用注释的代码更换
	let urlObj = new URL(url)
	let reg = new RegExp(/(^|&)(\&|$)/, 'i')
	let res = url.search.slice(1).match(reg)[2]
	return res ? res[2] : ''	
}
console.log(getUrlParams('http://aaa?query1=1', 'query1')) // 1

2. 通过URL对象方法获取（问题同上注意）

function getUrlParams (url, name) {
	let urlObj = new URL(url)
	let paramsObj = new URLSearchParams(urlObj.search) // 传入字符串的话记得开头带上 '?'
	return paramsObj.get(name)
}

3. 通过split方法分割URL

function getUrlParams (url, name) {
	let queryStr = url.split('?')[1]
	if (!queryStr) return
	let keyValueList = queryStr.split('&')
	for (let i = 0; i < keyValueList.length; i++) {
		if (keyValueList[i].includes(name)) {
			return keyValueList[i].split('=')[1]
		}
	}
	return ''
 }