Method of the front end to get URL parameters

preface

For front end, neither is likely to be encountered during the interview or job dealing with the url parameter, using a framework for project development may not, have their own way of obtaining parameter, but aside from using a framework, we can also use the native js way or use a third-party library to implement the capture and objectification of parameters, The following is an introduction to the specific usage.

Method 1: the string split method

Because a URL address is a string, the split method is used to extract parameters, which is common and easy to understand (for me, who is not a regular user, haha~).

let URL = "http://www.baidu.com?name= zhang SAN &age=25&sex= male &wife= xiao Hong"
function getUrlParams(url) {
    / / by? Split gets the argument string that follows
    let urlStr = url.split('? ') [1]
    // Create an empty object storage parameter
	let obj = {};
    // Separate each argument by &
	let paramsArr = urlStr.split('&')
	for(let i = 0,len = paramsArr.length; i < len; i++){// Split each argument into key:value with =
		let arr = paramsArr[i].split('=')
		obj[arr[0]] = arr[1];
	}
	return obj
}
console.log(getUrlParams(URL))
Copy the code

Method 2: Use the URLSearchParams method

Two methods are combined in MDN to obtain parameters: 1. Use the new URLSearchParams(URL) method to return an URLSearchParams object, and then call entries() method to return an Iterator; 2. 2. Use the object. fromEntries(iterable) method to convert the Object into a common Object

let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"
function getUrlParams2(url) {
	let urlStr = url.split('? ') [1]
	const urlSearchParams = new URLSearchParams(urlStr)
	const result = Object.fromEntries(urlSearchParams.entries())
	return result
}
console.log(getUrlParams2(URL))
Copy the code

Special: URLSearchParams method can not only get parameters, can also be converted into a string parameter object, detailed usage can be seen in THE MDN introduction, and this method has browser compatibility problems.

Method 3: Use the regular matching method

Regular match powerful believes that many friends all know that not only can realize the login registration account, password, email, phone number, etc., can also be very convenient to deal with some string (such as checking, replace, extract operation), the difficulty lies in the regular use of proficiency, here is extracted through regular need of characters in the string

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
	[\ u4E00 -\ U9FA5]+ indicates that at least one Chinese character is matched
	let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
	let result = {};
	url.replace(pattern, ($, $1, $2) = >{
		result[$1] = $2;
	})
	return result
}
console.log(getUrlParams3(URL))
Copy the code

Method 4: Use third-party library QS

The use of third-party library QS can also achieve the extraction of parameter characters in the URL, but also to achieve the parameter object into the FORM of URL parameters, it should be noted that the browser CDN mode is added to the QS attribute of the global object Window by default

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script>
<script>
let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price=￥9999.00"
function getUrlParams4(url){
	// The qs attribute of the global window is hung by default when the qs library is introduced
	// console.log(window)
	let urlStr = url.split('? ') [1]
	let result = Qs.parse(urlStr)
	// Concatenate additional parameters
	let otherParams = {
		num:50.size:6.1
	}
	let str = Qs.stringify(otherParams)
	let newUrl = url + str
	return {result,newUrl}
}
console.log(getUrlParams4(URL))
</script>
Copy the code

Summary: the above is the personal combination of other articles to obtain the URL in the way of sorting out parameters, which have wrong place hope to be able to point out, thank you!!