zoukankan      html  css  js  c++  java
  • url 解析

    最近在做一个单页应用,使用AngularJS来处理一些页内路由(哈希#后的路由变化)。自然会要解析URL中的参数。使用AngularJS自带的方法$location.search();可以自动将参数整理成一个对象,感觉非常方便,我们今天就来试着写一个。url嘛,可以看成一个有特定规律的字符串。第一反应是是不是可以用正则表达式和字符串操作

    一个复杂的url 可能是这样的http://www.baidu.com/#/test/my?params1=a&parmas2=b&parmas2=bb&parmas2=bbb

    一、字符串函数解析

    我们可以借助一个字符串API split() :  http://www.w3school.com.cn/jsref/jsref_split.asp

     1     var urlTool = {
     2         getDomain: function(url){
     3             var _url = url;
     4             var domain = (_url.split('?')[0]).split('#');
     5             if(domain){
     6                 return domain;
     7             }else{
     8                 return '';
     9             }
    10         },
    11         getParmas: function(url){
    12             var search = {};
    13             var _url = url;
    14             var strParams = _url.split('?')[1];
    15             if(!strParams){return {};}
    16             var params = strParams.split('&');
    17             var par_len = params.length;
    18             for(var i_par = 0; i_par < par_len; i_par++){
    19                 var par = params[i_par].split('=');
    20                 var k = par[0],
    21                     v = par[1];
    22                 if(!search[k]){
    23                     search[k] = v;
    24                 }else{
    25                     if(search[k].length && search[k].length > 1){
    26                         //已存在是数组
    27                         search[k].push(v);
    28                     }else{
    29                         //已存在但不是数组
    30                         var old_v = search[k]
    31                         search[k] = [];
    32                         search[k].push(old_v);
    33                         search[k].push(v);
    34                     }
    35                 }
    36             }
    37             return search;
    38         }
    39     }
  • 相关阅读:
    web前端开发规范
    前端工程构建工具之Yeoman
    javascript编码规范
    IOS和安卓不同浏览器常见bug
    SASS对css的管理
    移动端开发注意事项
    性能调试工具
    前端开发和其他类别工程师配合的那些事!
    前端工程师常见的面试题
    前端性能优化浏览器+服务器篇
  • 原文地址:https://www.cnblogs.com/webARM/p/4159803.html
Copyright © 2011-2022 走看看