====== UrlUtil封装的常用的url集中处理方法 ====== UrlUtil主要是一个常用的url处理方法集合，包含拼装参数，获取参数，删除参数，而url参数包括两种，一种是基本参数，一种是拼装在hash上面的参数(主要是vue，ng等前端框架上使用)，这里把这个事情封装成了一个方法，方便调用，自己在项目中也可以使用这种方法： ===== 调用示例 ===== var url = 'https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892'; // 获取url基本部分，即不包括 hash UrlUtil.getBaseUrl(url) // https://www.dingsky.com/index.html?version=development&templateId=1 // 获取 url 的基本参数部分 UrlUtil.getSearchFragment(url) // version=development&templateId=1 // 获取 url 的hash部分 UrlUtil.getHashFragment(url) // shareCode=2020101523160272892 // 获取url指定的参数 UrlUtil.getQueryVariable(url, 'version') // development // 获取url hash部分指定的参数 UrlUtil.getHashQueryVariable(url, 'shareCode') // 2020101523160272892 // 格式化拼装Url参数 UrlUtil.format(url, {templateId: 2, a:3, b:4 }) // https://www.dingsky.com/index.html?version=development&templateId=2&a=3&b=4#/order/2020101523114698396940?shareCode=2020101523160272892 // 格式化拼装hash参数Url UrlUtil.formatHash(url, {templateId: 2, a:3, b:4 }) // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892&templateId=2&a=3&b=4 // 给url插入或者修改参数 UrlUtil.append(url, 'name', 'huihui') // https://www.dingsky.com/index.html?version=development&templateId=1&name=huihui#/order/2020101523114698396940?shareCode=2020101523160272892 // 给url hash部分插入或者修改参数 UrlUtil.appendHash(url, 'name', 'huihui') // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940?shareCode=2020101523160272892&name=huihui // 删除url参数 UrlUtil.delete(url, 'templateId') // https://www.dingsky.com/index.html?version=development#/order/2020101523114698396940?shareCode=2020101523160272892 // 删除url hash部分参数 UrlUtil.deleteHash(url, 'shareCode') // https://www.dingsky.com/index.html?version=development&templateId=1#/order/2020101523114698396940 ===== 封装的代码 ===== /** * 对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, hashIndex); }, /** * 获取 url 的 fragment（即 hash 中去掉 # 的剩余部分） * @param {String} url url * @returns {String} */ getHashFragment: function(url) { let hashIndex = url.indexOf('#'); return hashIndex === -1 ? '' : url.slice(hashIndex + 1); }, getSearchFragment: function(url) { let baseUrl = this.getBaseUrl(url); let searchIndex = baseUrl.indexOf('?'); return searchIndex === -1 ? '' : baseUrl.slice(searchIndex + 1); }, /** * 传入对象返回url参数 * @param {Object} options {a:1} * @returns {string} */ getParam(fragment = '', options) { for (let k in options) { let arg = k, val = options[k] !== undefined ? options[k] : ''; let pattern = arg + '=([^&]*)'; let replaceText = arg + '=' + val; fragment = fragment.match(pattern) ? fragment.replace(eval('/(' + arg + '=)([^&]*)/gi'), replaceText) : fragment.match('[?]') ? fragment + '&' + replaceText : fragment + '?' + replaceText; } return fragment; }, /** * 删除URL参数 * @param {*} url * @param {*} name */ delParam(url, name) { let str = ''; if (url.indexOf('?') != -1) str = url.substr(url.indexOf('?') + 1); else return url; let arr = ''; let returnurl = ''; if (str.indexOf('&') != -1) { arr = str.split('&'); for (let i in arr) { if (arr[i].split('=')[0] != name) { returnurl = returnurl + arr[i].split('=')[0] + '=' + arr[i].split('=')[1] + '&'; } } return url.substr(0, url.indexOf('?')) + '?' + returnurl.substr(0, returnurl.length - 1); } else { arr = str.split('='); if (arr[0] == name) return url.substr(0, url.indexOf('?')); else return url; } }, /** * 格式化拼装Url参数 * @param {*} url * @param {*} options */ format: function(url, options) { let hash = this.getHashFragment(url); let baseUrl = this.getBaseUrl(url); console.log(hash); return this.getParam(baseUrl, options) + (!hash ? '' : '#' + hash); }, /** * 格式化拼装hash参数Url * @param {*} url * @param {*} options */ formatHash: function(url, options) { let hash = this.getHashFragment(url); let baseUrl = this.getBaseUrl(url); let newHash = this.getParam(hash, options); return baseUrl + (newHash ? '#' + newHash : ''); }, /** * 给url插入或者修改参数 * @param {*} url * @param {*} name * @param {*} value */ append(url, name, value) { let options = {}; options[name] = value; return this.format(url, options); }, /** * 给url hash部分插入或者修改参数 * @param {*} url * @param {*} name * @param {*} value */ appendHash(url, name, value) { let options = {}; options[name] = value; return this.formatHash(url, options); }, /** * 删除url参数 * @param {*} url * @param {*} name */ delete(url, name) { let hash = this.getHashFragment(url); let baseUrl = this.getBaseUrl(url); return this.delParam(baseUrl, name) + (!hash ? '' : '#' + hash); }, /** * 删除url hash部分参数 * @param {*} url * @param {*} name */ deleteHash(url, name) { let hash = this.getHashFragment(url); let baseUrl = this.getBaseUrl(url); let newHash = this.delParam(hash, name); return baseUrl + (newHash ? '#' + newHash : ''); }, /** * 获取url指定的参数 * @param {*} url * @param {*} variable */ getQueryVariable(url, variable) { var query = this.getSearchFragment(url); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (pair[0] == variable) { return pair[1]; } } return false; }, /** * 获取url hash部分指定的参数 * @param {*} url * @param {*} variable */ getHashQueryVariable(url, variable) { var query = this.getHashFragment(url); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (pair[0] == variable) { return pair[1]; } } return false; }, /** * 把一个字符串的 url 转为一个可获取其 base 和 fragment 等的对象 * * @param {String} url url * @returns {UrlObject} */ toUrlObject: function(url) { let baseUrl = this.getBaseUrl(url), hash = this.getHashFragment(url), search = this.getSearchFragment(url); return { base: baseUrl, original: url, search: search, hash: hash, }; }, };