阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 封装的用于处理 URL 路径的小对象

      URL 路径是前端业务中,会碰到的一个东西;

      下面的是一个处理 URL 的(为了演示方便,封装格式做了改变);

      里面有下面几个方法

      1、getParam:参数是 url 中的 key,用来获取指定 key 的 value;

      2、getQuery:参数是 key[,path] ; 可以在指定的 url 中查找指定 key 的 value;如果不指定 url,则在当前环境的 URL 中查找;

      3、getUrlSearchParam:参数是 url 路径,返回格式化的 query;

      4、parseURL:这个是常用的方法,用来解析 url 的;参数是一个 url;返回一个对象;

      5、replaceUrlParams:参数是一个 url,一个对象;用来替换路径中的同名参数;

      DEMO 演示:https://zhubangbang.com/demo/for-url/index.html

      代码如下:

      window.Utility = {};
      (function (URLObj) {
          //搜索参数
          URLObj.getParam = function (name) {
              var sUrl = window.location.search.substr(1);
              var r = sUrl.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)"));
              return (r == null ? null : unescape(r[2]));
          };
      
          URLObj.getQuery = function (name, url) {
              //参数:变量名,url为空则表从当前页面的url中取
              var u = arguments[1] || window.location.search.replace("&", "&"),
                  reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
                  r = u.substr(u.indexOf("\?") + 1).match(reg);
              return r != null ? r[2] : "";
          };
      
          //传一个路径,找的内容,以对象形式返回;
          URLObj.getUrlSearchParam = function (path) {
              var result = {}, param = /([^?=&]+)=([^&]+)/ig, match;
              while ((match = param.exec(path)) != null) {
                  result[match[1]] = match[2];
              }
              return result;
          };
          //分析url
          URLObj.parseURL = function (url) {
              var a = document.createElement('a');
              a.href = url;
              return {
                  source: url,
                  protocol: a.protocol.replace(':', ''),
                  host: a.hostname,
                  port: a.port,
                  query: a.search,
                  params: (function () {
                      var ret = {},
                          seg = a.search.replace(/^\?/, '').split('&'),
                          len = seg.length, i = 0, s;
                      for (; i < len; i++) {
                          if (!seg[i]) {
                              continue;
                          }
                          s = seg[i].split('=');
                          ret[s[0]] = s[1];
                      }
                      return ret;
                  })(),
                  file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
                  hash: a.hash.replace('#', ''),
                  path: a.pathname.replace(/^([^\/])/, '/$1'),
                  relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
                  segments: a.pathname.replace(/^\//, '').split('/')
              };
          };
      
          //替换myUrl中的同名参数值
          URLObj.replaceUrlParams = function (myUrl, newParams) {
              /*
              for (var x in myUrl.params) {
                  for (var y in newParams) {
                      if (x.toLowerCase() == y.toLowerCase()) {
                          myUrl.params[x] = newParams[y];
                      }
                  }
              }
              */
              for (var x in newParams) {
                  var hasInMyUrlParams = false;
                  for (var y in myUrl.params) {
                      if (x.toLowerCase() == y.toLowerCase()) {
                          myUrl.params[y] = newParams[x];
                          hasInMyUrlParams = true;
                          break;
                      }
                  }
                  //原来没有的参数则追加
                  if (!hasInMyUrlParams) {
                      myUrl.params[x] = newParams[x];
                  }
              }
              var _result = myUrl.protocol + "://" + myUrl.host + ":" + myUrl.port + myUrl.path + "?";
              for (var p in myUrl.params) {
                  _result += (p + "=" + myUrl.params[p] + "&");
              }
              if (_result.substr(_result.length - 1) == "&") {
                  _result = _result.substr(0, _result.length - 1);
              }
              if (myUrl.hash != "") {
                  _result += "#" + myUrl.hash;
              }
              return _result;
          }
      })(window.Utility);
      
      // var myURL = Utility.parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
      // console.log(myURL);
      

      下面是 DEMO 的演示

      // ********************* 下面都是DEMO *************************
      
      //辅助输出
      function w(str) {
          document.write(str + "<br>");
      }
      
      //parseURL
      var urlStr = "http://abc.com:8080/dir/index.html?id=255&m=hello#top";
      var myURL = Utility.parseURL(urlStr);
      console.log(myURL);
      
      w("myUrl.source = " + myURL.source);   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
      w("myUrl.file = " + myURL.file);     // = 'index.html'
      w("myUrl.hash = " + myURL.hash);     // = 'top'
      w("myUrl.host = " + myURL.host);     // = 'abc.com'
      w("myUrl.query = " + myURL.query);    // = '?id=255&m=hello'
      w("myUrl.params = " + myURL.params);   // = Object = { id: 255, m: hello }
      w("myUrl.path = " + myURL.path);     // = '/dir/index.html'
      w("myUrl.segments = " + myURL.segments); // = Array = ['dir', 'index.html']
      w("myUrl.port = " + myURL.port);     // = '8080'
      w("myUrl.protocol = " + myURL.protocol); // = 'http'
      
      //replaceUrlParams
      var _newUrl = Utility.replaceUrlParams(myURL, { id: 101, m: "World", page: 1, "page": 2 });
      w("<br>新url为:");
      w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top
      
      //getParam
      // 备注:本html打开的路径是  file:///E:/blog/zhubangbang/index.html?id=12345678
      w("Utility.parseURL:" + Utility.getParam("id"));               //12345678
      w("Utility.getQuery:" + Utility.getQuery("id", urlStr));        //255    从目标url中取;
      w("Utility.getQuery:" + Utility.getQuery("id"));                //12345678 从当前取值
      w("Utility.getUrlSearchParam:参见console");  //
      console.log("Utility.getUrlSearchParam(urlStr)", Utility.getUrlSearchParam(urlStr));
      
      目录
      本文目录
      目录