获取URL params

Posted 2022-02-12 auserroot

通常获取url后面的参数使用分割或正则
字符串分割

//字符串分割
let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';

const parseParam = (url)=>
  const params = url.split('?')[1].split('&')
  console.log(params) /**[
						 * 'user=anonymous',
						 * 'id=456',
						 * 'city=%E5%8C%97%E4%BA%AC',
						]*/
  let obj = 
  //for in 遍历
  for (item in params)
  	obj[params[item].split('=')[0]] = params[item].split('=')[1]
  

//forEarch||map遍历
 params.forEach(item => 
    obj[item.split('=')[0]] = item.split('=')[1]
 );
   console.log(obj) /* user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' */ (%E5%8C%97%E4%BA%AC 可使用 UrlDecode 转码)


parseParam(url)

正则

let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';

const parseParam = (url)=>
  let r = /\\?(.+)/g
  let re = /(.+)&(.+)&(.+)/g //需根据参数调整 或直接使用 split 分割
  let arr = []
  let o = r.exec(url)[1]
  console.log(o) //user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC
  let ob = re.exec(o)
  arr.push(ob[1],ob[2],ob[3])
  console.log('ob',ob,'arr',arr) /*ob [
			 'user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC',
			  'user=anonymous',
			  'id=456',
			  'city=%E5%8C%97%E4%BA%AC',
			  index: 0,
			  input: 'user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC',
			  groups: undefined
			] 
			arr [ 'user=anonymous', 'id=456', 'city=%E5%8C%97%E4%BA%AC' ]*/
  let obj = 
  arr.forEach(item => 
    obj[item.split('=')[0]] = item.split('=')[1]
  );
  for (item in arr)
    obj[arr[item].split('=')[0]] = arr[item].split('=')[1]
  
  console.log(obj)// user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' 
 


parseParam(url)

正则改

const parseParam = (url)=>
  let r = /\\?(.+)/g
  let o = r.exec(url)[1]
  console.log(o) //user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC
  let arr = o.split('&')
  let obj = 
  arr.forEach(item => 
    obj[item.split('=')[0]] = item.split('=')[1]
  );
  for (item in arr)
    obj[arr[item].split('=')[0]] = arr[item].split('=')[1]
  
  console.log(obj)// user: 'anonymous', id: '456', city: '%E5%8C%97%E4%BA%AC' 
 


parseParam(url)

现在新版浏览器提供了两个API可以直接获取

searchParams

//searchParams
let url = 'http://www.xxx.com/?user=lili&id=456&city=%E5%8C%97%E4%BA%AC';

const parseParam = (url)=>
  let o =(new URL(url)).searchParams
 console.log(o) // URLSearchParams 
  				//	'user' => 'anonymous',
  				// 	'id' => '456',
  				//	'city' => '北京',
  				//
 for(item of o)
   console.log(item) //[ 'user', 'anonymous' ]
					 //[ 'id', '456' ]
					 //[ 'city', '北京' ]
 
  


parseParam(url)

URLSearchParams

//URLSearchParams
let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';

const parseParam = (url)=>
  const params = url.split('?')
  console.log(params)// URLSearchParams 
	  				//	'http://www.xxx.com/?user' => 'anonymous',
	  				// 	'id' => '456',
	  				//	'city' => '北京',
	  				// （使用node环境测试结果）
  let obj = new URLSearchParams(params[1])
 console.log(obj) // URLSearchParams 
  				  //	'user' => 'anonymous',
  				  // 	'id' => '456',
  				  //	'city' => '北京',
  				  //（使用node环境测试结果）
 for(item of obj)
   console.log(item) //[ 'user', 'anonymous' ]
					 //[ 'id', '456' ]
					 //[ 'city', '北京' ]
 
  


parseParam(url)