const urlUtil = {
// 获取url的参数
getQuery(url) {
url = url || window.location.href;
const [path0, hash] = url.split('#');
const [_0, search] = path0.split('?');
const [_1, hashSearch] = (hash || '').split('?');
console.log(_0, _1);
const query0 = this._parseSearch('?' + (search || ''));
const query1 = this._parseSearch('?' + (hashSearch || ''));
return { ...query0, ...query1 };
},
// 添加参数
addQuery(params, url) {
params = params || {};
url = url || window.location.href;
let [path0, hash] = url.split('#');
// 如果有hash,则参数加在hash后面,否则加在search上
if (hash) {
const [newHash, hashSearch] = hash.split('?');
const query = this._parseSearch('?' + (hashSearch || ''));
const newQueryStr = this._queryString({
...query,
...params,
});
hash = newHash + (newQueryStr ? '?' + newQueryStr : '');
} else {
const [newPath0, search] = path0.split('?');
const query = this._parseSearch('?' + (search || ''));
const newQueryStr = this._queryString({
...query,
...params,
});
path0 = newPath0 + (newQueryStr ? '?' + newQueryStr : '');
}
return path0 + (hash ? '#' + hash : '');
},
// 移除参数
removeQuery(keys, url) {
keys = keys || [];
url = url || window.location.href;
let [path0, hash] = url.split('#');
if (hash) {
const [newHash, hashSearch] = hash.split('?');
const query = this._parseSearch('?' + (hashSearch || ''));
keys.forEach(key => {
delete query[key];
});
const newQueryStr = this._queryString(query);
hash = newHash + (newQueryStr ? '?' + newQueryStr : '');
}
const [newPath0, search] = path0.split('?');
const query = this._parseSearch('?' + (search || ''));
keys.forEach(key => {
delete query[key];
});
const newQueryStr = this._queryString(query);
path0 = newPath0 + (newQueryStr ? '?' + newQueryStr : '');
return path0 + (hash ? '#' + hash : '');
},
_parseSearch(search = '') {
// search里面一定要有问号
search = search || '';
const queryObj = {};
const reg = /[?&]([^=&#]+)=([^&#]*)/g;
const queryArr = search.match(reg) || [];
for (const i in queryArr) {
if (Object.hasOwnProperty.call(queryArr, i)) {
const query = queryArr[i].split('=');
const key = query[0].substr(1);
const value = decodeURIComponent(query[1]);
queryObj[key] = value;
}
}
return queryObj;
},
_queryString(query = {}) {
return Object.keys(query).map(key => `${key}=${(query[key] == null ? '' : query[key])}`).join('&');
}
}
export default urlUtil;
解析url参数和往url拼接参数
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 废话不多说直接上代码 安装依赖npm i --save-dev query-string 引入到项目中去impor...
- url参数解析为一个对象 序列化数据为URL参数 经典前端面试题每日更新,欢迎参与讨论,地址:https://gi...
- 一条完整的url由请求协议、域名、请求相对路径、请求参数组成,例如:http://api.bilibili.com...