差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- urlutil-urlutil是一个常用的url集中处理方法 [2020/10/19 18:46]
dinghui
+++ urlutil-urlutil是一个常用的url集中处理方法 [2021/12/23 17:19] (当前版本)
@@ 行 1: / 行 1: @@
+====== 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,
+          };
+      },
+  };

梅竹生辉

用户工具

站点工具

差别

页面工具