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

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

安全组规则之间是可以相互引用的，也可以自己是自己手动输入的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），如果不是以此往下类推。

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

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

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

最后：

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