梅竹生辉

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== 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,
          };
      },
  };
梅竹生辉

用户工具

站点工具

页面工具
