处理URL的query的接口：URLSearchParams
// 处理URL的query的接口：URLSearchParams // 简单使用 let url = '?wd=胡歌&love=fx&year=2020'; let searchParams = new URLSearchParams(url); for (let p of searchParams) { console.log(p); } // ["wd", "胡歌"] // ["love", "fx"] // ["year", "2020"] // 获取单个字段 调用这个实例的get方法 searchParams.get('wd') // "胡歌" searchParams.get('love') // "fx" searchParams.get('year') // "2020" // 字段是否存在，使用实例的has方法进行判断 searchParams.has('wd') // true searchParams.has('age') // false // 添加字段 append方法来添加字段，这个方法接收两个参数，前者是key，后者是value searchParams.append('age', 26); searchParams.has('age'); // true searchParams.get('age'); // 26 // 删除字段 delete searchParams.delete('year'); searchParams.has('year'); // false // 重写字段 set方法 searchParams.set('wd', '胡歌 fx');兼容性
现代浏览器基本没有啥大问题，但是IE的支持不是很理想。
常用URL操作方法封装
// 获取单个参数 function getParam(name, url) { if(typeof name !== 'string') return false; if (!url) url = window.location.href; // 当遇到name[xx]时，对方括号做一下转义为 name\[xxx\]，因为下面还需要使用name做正则 name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); var results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } getParam('query','https://juejin.im/search?query=hello&time=2017-11-12') // output: // "hello" // 设置单个参数 function setParam(name, val, url) { if(typeof name !== 'string') return false; if (!url) url = window.location.href; var _name = name.replace(/[\[\]]/g, '\\$&'); var value = name + '=' + encodeURIComponent(val); var regex = new RegExp(_name + '=[^&]*'); var urlArr = url.split('#'); var result = ''; if(regex.exec(url)){ result = url.replace(regex, value); }else{ result = urlArr[0]+'&'+value+ (urlArr[1] || ''); } return result } setParam('query','world','https://juejin.im/search?query=hello&time=2017-11-12') // output: // "https://juejin.im/search?query=world&time=2017-11-12" // 移除单个参数 function removeParam(name, url) { if(typeof name !== 'string') return false; if (!url) url = window.location.href; var urlparts = url.split('?'); var prefix = encodeURIComponent(name + '='); var pars = urlparts[1].split(/[&;]/g); var i = 0, len = pars.length; for (; i < len; i++) { if (encodeURIComponent(pars[i]).lastIndexOf(prefix, 0) !== -1) { pars.splice(i, 1); } } url = urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ''); return url; } removeParam('query','https://juejin.im/search?query=hello&time=2017-11-12') // output: // "https://juejin.im/search?time=2017-11-12" // 获取多个参数 function getParams(names, url) { if(typeof name !== 'string') return false; var names = names.split(' '); var result = {}; var i = 0, len = names.length; if (names.length === 0) return false; for (; i < len; i++) { result[names[i]] = getParam(names[i], url); } return result; } getParams('query time','https://juejin.im/search?query=hello&time=2017-11-12') // output: // {query: "hello", time: "2017-11-12"} // 设置多个参数 function setParams(obj, url) { var result = url || ''; if (Object.prototype.toString.call(obj) !== '[object Object]') return false; for (var name in obj) { result = setParam(name, obj[name], result); } return result; } setParams({a:111,b:222,query:'world'},'https://juejin.im/search?query=hello&time=2017-11-12') // output: // "https://juejin.im/search?query=world&time=2017-11-12&a=111&b=222" // 移除多个参数 function removeParams(names, url) { var result = url || ''; var names = names.split(' '); var i = 0, len = names.length; if (names.length === 0) return false; for (; i < len; i++) { result = removeParam(names[i], result); } return result; } removeParams('query time','https://juejin.im/search?query=hello&time=2017-11-12') // output: // "https://juejin.im/search"url hash 操作
function getHash(url) { return decodeURIComponent(url ? url.substring(url.indexOf('#') + 1) : window.location.hash.substr(1)); } function setHash(hash) { window.location.replace('#' + encodeURIComponent(hash)); } function removeHash() { window.location.replace('#', ''); }