获取URL params

大家好，欢迎来到IT知识分享网。

通常获取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=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)