这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 | |||
urlutil-urlutil是一个常用的url集中处理方法 [2020/10/19 18:47] dinghui [UrlUtil] |
urlutil-urlutil是一个常用的url集中处理方法 [2021/12/23 17:19] (当前版本) |
||
---|---|---|---|
行 1: | 行 1: | ||
+ | ====== UrlUtil封装的常用的url集中处理方法 ====== | ||
+ | UrlUtil主要是一个常用的url处理方法集合,包含拼装参数,获取参数,删除参数,而url参数包括两种,一种是基本参数,一种是拼装在hash上面的参数(主要是vue,ng等前端框架上使用),这里把这个事情封装成了一个方法,方便调用,自己在项目中也可以使用这种方法: | ||
+ | |||
+ | ===== 调用示例 ===== | ||
+ | var url = ' | ||
+ | | ||
+ | // 获取url基本部分,即不包括 hash | ||
+ | UrlUtil.getBaseUrl(url) | ||
+ | | ||
+ | // 获取 url 的基本参数部分 | ||
+ | UrlUtil.getSearchFragment(url) | ||
+ | | ||
+ | // 获取 url 的hash部分 | ||
+ | UrlUtil.getHashFragment(url) | ||
+ | | ||
+ | // 获取url指定的参数 | ||
+ | UrlUtil.getQueryVariable(url, | ||
+ | | ||
+ | // 获取url hash部分指定的参数 | ||
+ | UrlUtil.getHashQueryVariable(url, | ||
+ | | ||
+ | // 格式化拼装Url参数 | ||
+ | UrlUtil.format(url, | ||
+ | | ||
+ | // 格式化拼装hash参数Url | ||
+ | UrlUtil.formatHash(url, | ||
+ | | ||
+ | // 给url插入或者修改参数 | ||
+ | UrlUtil.append(url, | ||
+ | | ||
+ | // 给url hash部分插入或者修改参数 | ||
+ | UrlUtil.appendHash(url, | ||
+ | | ||
+ | // 删除url参数 | ||
+ | UrlUtil.delete(url, | ||
+ | | ||
+ | // 删除url hash部分参数 | ||
+ | UrlUtil.deleteHash(url, | ||
+ | | ||
+ | ===== 封装的代码 ===== | ||
+ | /** | ||
+ | * 对Url的一些处理方法 | ||
+ | */ | ||
+ | export default { | ||
+ | /** | ||
+ | * 获取一个 url 的基本部分,即不包括 hash | ||
+ | * @param {String} url url | ||
+ | * @returns {String} | ||
+ | */ | ||
+ | getBaseUrl: function(url) { | ||
+ | let hashIndex = url.indexOf('#' | ||
+ | return hashIndex === -1 ? url.slice(0) : url.slice(0, | ||
+ | }, | ||
+ | /** | ||
+ | * 获取 url 的 fragment(即 hash 中去掉 # 的剩余部分) | ||
+ | * @param {String} url url | ||
+ | * @returns {String} | ||
+ | */ | ||
+ | getHashFragment: | ||
+ | let hashIndex = url.indexOf('#' | ||
+ | return hashIndex === -1 ? '' | ||
+ | }, | ||
+ | getSearchFragment: | ||
+ | let baseUrl = this.getBaseUrl(url); | ||
+ | let searchIndex = baseUrl.indexOf('?' | ||
+ | return searchIndex === -1 ? '' | ||
+ | }, | ||
+ | /** | ||
+ | * 传入对象返回url参数 | ||
+ | * @param {Object} options {a:1} | ||
+ | * @returns {string} | ||
+ | */ | ||
+ | getParam(fragment = '', | ||
+ | for (let k in options) { | ||
+ | let arg = k, | ||
+ | val = options[k] !== undefined ? options[k] : ''; | ||
+ | | ||
+ | let pattern = arg + ' | ||
+ | let replaceText = arg + ' | ||
+ | fragment = fragment.match(pattern) | ||
+ | ? fragment.replace(eval('/ | ||
+ | : fragment.match(' | ||
+ | ? fragment + '&' | ||
+ | : fragment + '?' | ||
+ | } | ||
+ | return fragment; | ||
+ | }, | ||
+ | /** | ||
+ | * 删除URL参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} name | ||
+ | */ | ||
+ | delParam(url, | ||
+ | let str = ''; | ||
+ | if (url.indexOf('?' | ||
+ | else return url; | ||
+ | let arr = ''; | ||
+ | let returnurl = ''; | ||
+ | if (str.indexOf('&' | ||
+ | arr = str.split('&' | ||
+ | for (let i in arr) { | ||
+ | if (arr[i].split(' | ||
+ | returnurl = returnurl + arr[i].split(' | ||
+ | } | ||
+ | } | ||
+ | return url.substr(0, | ||
+ | } else { | ||
+ | arr = str.split(' | ||
+ | if (arr[0] == name) return url.substr(0, | ||
+ | else return url; | ||
+ | } | ||
+ | }, | ||
+ | /** | ||
+ | * 格式化拼装Url参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} options | ||
+ | */ | ||
+ | format: function(url, | ||
+ | let hash = this.getHashFragment(url); | ||
+ | let baseUrl = this.getBaseUrl(url); | ||
+ | console.log(hash); | ||
+ | return this.getParam(baseUrl, | ||
+ | }, | ||
+ | /** | ||
+ | * 格式化拼装hash参数Url | ||
+ | * @param {*} url | ||
+ | * @param {*} options | ||
+ | */ | ||
+ | formatHash: function(url, | ||
+ | let hash = this.getHashFragment(url); | ||
+ | let baseUrl = this.getBaseUrl(url); | ||
+ | let newHash = this.getParam(hash, | ||
+ | return baseUrl + (newHash ? '#' | ||
+ | }, | ||
+ | /** | ||
+ | * 给url插入或者修改参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} name | ||
+ | * @param {*} value | ||
+ | */ | ||
+ | append(url, name, value) { | ||
+ | let options = {}; | ||
+ | options[name] = value; | ||
+ | return this.format(url, | ||
+ | }, | ||
+ | /** | ||
+ | * 给url hash部分插入或者修改参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} name | ||
+ | * @param {*} value | ||
+ | */ | ||
+ | appendHash(url, | ||
+ | let options = {}; | ||
+ | options[name] = value; | ||
+ | return this.formatHash(url, | ||
+ | }, | ||
+ | /** | ||
+ | * 删除url参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} name | ||
+ | */ | ||
+ | delete(url, name) { | ||
+ | let hash = this.getHashFragment(url); | ||
+ | let baseUrl = this.getBaseUrl(url); | ||
+ | return this.delParam(baseUrl, | ||
+ | }, | ||
+ | /** | ||
+ | * 删除url hash部分参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} name | ||
+ | */ | ||
+ | deleteHash(url, | ||
+ | let hash = this.getHashFragment(url); | ||
+ | let baseUrl = this.getBaseUrl(url); | ||
+ | let newHash = this.delParam(hash, | ||
+ | return baseUrl + (newHash ? '#' | ||
+ | }, | ||
+ | /** | ||
+ | * 获取url指定的参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} variable | ||
+ | */ | ||
+ | getQueryVariable(url, | ||
+ | var query = this.getSearchFragment(url); | ||
+ | var vars = query.split('&' | ||
+ | for (var i = 0; i < vars.length; | ||
+ | var pair = vars[i].split(' | ||
+ | if (pair[0] == variable) { | ||
+ | return pair[1]; | ||
+ | } | ||
+ | } | ||
+ | return false; | ||
+ | }, | ||
+ | /** | ||
+ | * 获取url hash部分指定的参数 | ||
+ | * @param {*} url | ||
+ | * @param {*} variable | ||
+ | */ | ||
+ | getHashQueryVariable(url, | ||
+ | var query = this.getHashFragment(url); | ||
+ | var vars = query.split('&' | ||
+ | for (var i = 0; i < vars.length; | ||
+ | var pair = vars[i].split(' | ||
+ | if (pair[0] == variable) { | ||
+ | return pair[1]; | ||
+ | } | ||
+ | } | ||
+ | return false; | ||
+ | }, | ||
+ | /** | ||
+ | * 把一个字符串的 url 转为一个可获取其 base 和 fragment 等的对象 | ||
+ | * | ||
+ | * @param {String} url url | ||
+ | * @returns {UrlObject} | ||
+ | */ | ||
+ | toUrlObject: | ||
+ | let baseUrl = this.getBaseUrl(url), | ||
+ | hash = this.getHashFragment(url), | ||
+ | search = this.getSearchFragment(url); | ||
+ | return { | ||
+ | base: baseUrl, | ||
+ | original: url, | ||
+ | search: search, | ||
+ | hash: hash, | ||
+ | }; | ||
+ | }, | ||
+ | }; | ||
+ | |||
+ | |