知识点
- URL中的查询参数和hash值
- 多种情况的考虑
题目
完成一个parseQueryString
函数。它接受一个url
字符串作为参数,返回一个对象,这个对象包含query string
上的键值对。例如:
parseQueryString('https://scriptoj.com/problems?offset=100&limit=10')
返回:
{ offset: '100', limit: '10'}
特殊情况说明:如果出现?name=&age=12
则返回{ name: '', age: '12' }
,如果?name&age=12
则返回{ name: null, age: '12' }
。
请考虑清楚query string
可能出现的各种情况,包括可能的出现hash
的情况(?name=jerry#nice
)。
如果需要帮助,可以对照参URI.js的执行结果。
实现
一开始想用正则实现,结果没写出来(囧)
后来老老实实去切分字符串,结果发现好多情况考虑不全
下面的代码是通过了的代码,但是也不知道还会不会有更多的情况没考虑到:
const parseQueryString = url => {
const index1 = url.indexOf('?');
const index2 = url.indexOf('#');
// 处理的情况1:没有查询参数
// 处理的情况2:如果#在?前面,#后面认为都是hash,而非查询参数
if (index1 === -1 || (index1 > index2 && index2 !== -1)) {
return {}
}
// 处理的情况3:如果没有#参数,直接取?后面的字符串
// 处理的情况4:如果#在?后面,取?和#之间的字符串
let str = (index2 === -1) ? url.slice(index1 + 1) : url.slice(index1 + 1, index2);
return str.split('&').reduce((total, current) => {
// 处理的情况5:?name&age=12返回{ name: null, age: '12' }
if (current.indexOf('=') === -1) {
total[current] = null;
} else {
// 处理的情况6 value中有多个=的情况
const index = current.indexOf('=');
const key = current.slice(0, index);
const value = current.slice(index+1);
// 处理的情况7 ?name=&age=12 则返回 { name: '', age: '12' }
total[key] = value || '';
}
return total;
}, {});
};
另一种方法
可以考虑使用URL API来实现
take已接受一个URL作为参数,创建一个URL实例对象,实例包含以下属性:
URLUtils.href
: 完整URLURLUtils.protocol
: 协议名URLUtils.host
: 域名和端口号URLUtils.hostname
: 域名URLUtils.pathname
: 以/
起头的URL路径URLUtils.search
: 以?
起头的查询字符串URLUtils.hash
: 以#
起头的hash值URLUtils.origin
: 协议名+域名+端口号
这里通过new URL构造出实例对象后就可以通过search
来直接访问查询参数,帮我们节省了之前集中特殊情况的处理。
要注意的是,URL API是一个实现性功能,IE不支持
const parseQueryString = url => {
const urlObj = new URL(url);
const {search} = urlObj;
if (!search) {
return {}
}
return new URL(url).search.slice(1).split('&').reduce((total, current) => {
// 处理的情况1:?name&age=12返回{ name: null, age: '12' }
if (current.indexOf('=') === -1) {
total[current] = null;
} else {
// 处理的情况2 value中有多个=的情况
const index = current.indexOf('=');
const key = current.slice(0, index);
const value = current.slice(index + 1);
// 处理的情况3 ?name=&age=12 则返回 { name: '', age: '12' }
total[key] = value || '';
}
return total;
}, {});
};