首页 > 代码库 > jQuery/javascript实现IP/Mask自动联想功能

jQuery/javascript实现IP/Mask自动联想功能

2024-07-16 20:16:58   222人阅读

之前做一个云计算的项目，涉及到一个安全组自动联想的功能，思想是这样的：

安全组规则之间是可以相互引用的，也可以自己是自己手动输入的ip/mask，这时候可以加一个功能，实现securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。 
主要实现方式是：后台处理securityGroupName和SecurityGroupName的组合列表，并且在前台做相应的处理，处理为数组对象，此时对名称和id的联想基本实现，如果再加上ip/task，只需做一些处理，创建一个新数组，拼接到之前的name和id的数组上，这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。

 

以下主要是实现ip/mask的转换，涉及一个最小掩码的算法，比如当前ip是10.12.0.0，这个时候需要计算出最小掩码，算法是：将该ip分段处理，如果第一个数不为0（，此处单纯的理解为10进制，也可以处理成2进制数之后相应的判断），那么查看后一位是否为0，这里以第二位为例（12）。因为第一位10后面的数（12）不为零，第二位12的后面的数（0）为零，则对12处理。12处理成2进制数为：00001100，掩码可最后一个1的位置有关，此时得出的数是6，那么第一位后面不为0，则第一位取全掩8，此时得出的值为8+6=14，也就是说该ip最后取出的最小掩码为14，还有三个是固定的，大家都会（14，16，24，34），如果不是以此往下类推。

 

Js代码  收藏代码
  1. /** 
  2.  * IP自动联想 
  3.  * 
  4.  * @param input IP 
  5.  * @return IP/Task 
  6.  */  
  7. function getIpArray(input){  
  8.     var ipArray = input.split(‘.‘);  
  9.   
  10.     for( var i = 0; i < 4; i++){  
  11.         if (ipArray[i] == undefined || ipArray[i] == ‘‘){  
  12.             ipArray[i] = 0;  
  13.         }  
  14. //  
  15. //      if(ipArray[i].indexOf(‘0‘) == 0 && ipArray[i].length > 1){  
  16. //          ipArray[i] = ipArray[i].substring(1, ipArray[i].length);  
  17. //      }  
  18.     }  
  19.   
  20.     return ipArray;  
  21. }  
  22.   
  23. function every(arr, func){  
  24.     var aa = [];  
  25.     for( var i = 0; i < arr.length; i++){  
  26.         aa.push(func(arr[i]));  
  27.     }  
  28.     return aa;  
  29. }  
  30.   
  31. function indexOfEnd(str){  
  32.     for( var i = str.length - 1; i >= 0; i--){  
  33.         if (str.charAt(i) == ‘1‘) {  
  34.             return 8 - (str.length - i) + 1;  
  35.         }  
  36.     }  
  37.     return 0;  
  38. }  
  39.   
  40. function getPermissions(input){  
  41.     var ipArray = getIpArray(input);  
  42.     var ip = ipArray.join(‘.‘);  
  43.   
  44.     var binaryIpArray = every(ipArray, function(oct){  
  45.         return Number(oct).toString(2);  
  46.     });  
  47.   
  48.     var yanma = 0;  
  49.     for( var i = binaryIpArray.length - 1; i >= 0; i--){  
  50.         if(binaryIpArray[i] != 0){  
  51.             yanma = indexOfEnd(binaryIpArray[i]) + i * 8;  
  52.             break;  
  53.         }  
  54.     }  
  55.   
  56.     var abc = [ 8, 16, 24, 32 ];  
  57.     var rstArray = [ ip + ‘/‘ + yanma ];  
  58.     for( var i = 0; i < abc.length; i++){  
  59.         if(abc[i] > yanma){  
  60.             rstArray.push(ip + ‘/‘ + abc[i]);  
  61.         }  
  62.     }  
  63.   
  64.     return rstArray;  
  65. }  



这里主要是在键盘事件触发的时候的一个脚本，实现自动联想 

Js代码  收藏代码
  1. /** 
  2.         * 创建安全组自动联想DOM 
  3.         */  
  4.         function createSgDom(input){  
  5.             var arrayObj = new Array();  
  6.             var ary = new Array();  
  7.             this.setNewAry([]);  
  8.             this.setAry([]);  
  9.   
  10.             var autoData = jsonData.substring(1, jsonData.length -1).split(‘, ‘);  
  11.             for ( var element in autoData) {  
  12.                 arrayObj.push(autoData[element]);  
  13.             }  
  14.   
  15.             var permissions = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/;  
  16.             var ip_1 = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))[\.]?){1,3})$/;  
  17.             var str = /^[a-zA-Z]*([a-zA-Z]|[-])*$/;  
  18.             if(null != input && !str.test(input)){  
  19.                 if(ip_1.test(input) || permissions.test(input)){  
  20.                     var except = false;  
  21.                     if(input.indexOf(‘.‘) > -1){  
  22.                         var value = input.split(‘.‘);  
  23.   
  24.                         for(var val in value){  
  25.                             var inVal = value[val];  
  26.                             if(inVal.indexOf(‘0‘) == 0 && inVal.length > 1){  
  27.                                 except = true;  
  28.                             }  
  29.                             if(inVal>255){  
  30.                                 except = true;  
  31.                             }  
  32.                         }  
  33.                     } else {  
  34.                         if(input>255){  
  35.                             except = true;  
  36.                         }  
  37.                     }  
  38.                     if(!except){  
  39.                         var ips = getPermissions(input);  
  40.   
  41.                         for(var ip in ips){  
  42.                             ary.push(ips[ip]);  
  43.                         }  
  44.                     }  
  45.                 }  
  46.             }  
  47.   
  48.             if(ary != null){  
  49.                 newAry = arrayObj.concat(ary);  
  50.             } else {  
  51.                 newAry = arrayObj;  
  52.             }  
  53.   
  54.             this.setNewAry(newAry);  
  55.   
  56.             $(‘#suggest_value‘).autocomplete({  
  57.                 source: this.getNewAry(),  
  58.                 minLength: 0,  
  59.                 close: function(event, ui){  
  60.                 },  
  61.                 focus: function(event, ui){  
  62.                     return false;  
  63.                 },  
  64.                 change: function(event, ui){  
  65.                 },  
  66.                 select: function(event, ui){  
  67.                     if(ui.item.label.indexOf(‘(‘) > -1 && ui.item.label.indexOf(‘)‘) > -1){  
  68.                         ui.item.value = ui.item.label.substring(0, ui.item.label.indexOf(‘(‘));  
  69.                     }else{  
  70.                         ui.item.value = ui.item.label.substring(0, ui.item.label.length);  
  71.                     }  
  72.                 }  
  73.             });  
  74.         }  


最后： 

Html代码  收藏代码
    1. //在输入框加上一个keyup事件，指定执行脚本：createSgDom($(‘#suggest_value‘).val());  
    2. // 引入自动联想插件和上面处理ip掩码的脚本  
    3.     <script type="text/javascript" src=http://www.mamicode.com/"theme/default/js/cbms/ip-permissions.js"></script>  
    4.     <%-- <script src=http://www.mamicode.com/"theme/default/jquery-ui/js/jquery-1.8.3.js" type="text/javascript"></script> --%>  
    5.     <script src=http://www.mamicode.com/"theme/default/jquery-ui/js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>  


联系
我们