如何优雅的拼接url之GET请求参数

作者 BiYuqi 日期 2017-01-17
如何优雅的拼接url之GET请求参数

请求的URL后面带参数在项目中是很常见的,常用在的地方比如跳转到新页面或者搜索关键词等,刚好项目用到,就写了我认为比较简便的方法提取参数

最常见的形式

url?arg1=value1&arg2=value2&arg3=value3...

如何拼接URL?

假如一个查询系统有很多字段,刚好需要拼接URl的形式进行查询,此刻我们可以采用对象过滤的方法进行转换:

const searchParam = {
name: 'Bob',
age: 20,
address: '',
phone: 18888888888
}
const transformParamToUrl = (param) => {
const tempObj = []
if (!param || typeof param !== 'object') {
return
}
for (let i in param) {
if (param.hasOwnProperty(i) && param[i]) {
tempObj.push(i)
tempObj.push('=')
tempObj.push(param[i])
tempObj.push('&')
}
}
// remove the last field &
tempObj.pop()
return tempObj.join('')
}
transformParamToUrl(searchParam)
// name=Bob&age=20&phone=18888888888

我们得到了拼接好的URL,并且未将无效值加入.

解析URL参数

我们拼接了URl,下面讲下如何解析URL参数.

const flatten = (arr) =>
arr.reduce((initial, curr, index) =>
Array.isArray(curr) ? initial.concat(flatten(curr)) : initial.concat(curr), [])
const parseQuery = (query) => {
const regexp = /(\w+)=([^&]+)/g
const result = {}
let match
while(match = regexp.exec(query)) {
let key = match[1], value = match[2].replace(/\n/g, '')
result[key] ? result[key] = flatten([result[key], value]) : result[key] = value
}
return result
}
// example:
const query = `
https://www.baidu.com/s?ie=utf8&f=8&f=90&rsv_bp=1&rsv_idx=1&rsv_bp=1&tn=baidu&wd=%E6%B0%B4%E7%94%B5%E8%B4%B9&rsv_pq=c7797024000434a8&rsv_t=b786FJnGwOOxPk7E7gsn1VbYHpmSP93UpP1470GL9ajYJkd09MOyBzSTsVk&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=4&rsv_sug7=101&rsv_bp=234&rsv_sug2=0&inputT=1760&rsv_sug4=2010&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0.rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM
`.split('?')[1]
parseQuery(query)
// {
// ie: 'utf8',
// f: [ '8', '90' ],
// rsv_bp: [ '1', '1', '234' ],
// rsv_idx: '1',
// tn: 'baidu',
// rsv_pq: 'c7797024000434a8',
// rsv_t: 'b786FJnGwOOxPk7E7gsn1VbYHpmSP93UpP1470GL9ajYJkd09MOyBzSTsVk',
// rqlang: 'cn',
// rsv_enter: '1',
// rsv_dl: 'tb',
// rsv_sug3: '5',
// rsv_sug1: '4',
// rsv_sug7: '101',
// rsv_sug2: '0',
// inputT: '1760',
// rsv_sug4: '2010'
// }

我们得到了预期的解析数据,并且相同的key进行了数组化存储.

在线小Demo

Demo仅做参考,请看代码请看上面👆.
DEMO