工作多年积攒的常用JavaScript工具函数

1、普通常用工具函数

1.获取变量的数据类型（jQuery源码）

function getType (obj) {
    var class2type = {};
    if (obj == null) {
        return obj + "";
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[toString.call(obj)] || "object" :
        typeof obj;
}

2.对象转 query string 参数（jQuery代码）

function objectToQueryString(a, traditional) {
    var getType = function (obj) {
        var class2type = {};
        if (obj == null) {
            return obj + "";
        }
        return typeof obj === "object" || typeof obj === "function" ?
            class2type[toString.call(obj)] || "object" :
            typeof obj;
    }
    var isPlainObject = function (obj) {
        var proto, Ctor;
        // Detect obvious negatives
        // Use toString instead of jQuery.type to catch host objects
        if (!obj || toString.call(obj) !== "[object Object]") {
            return false;
        }
        proto = Object.getPrototypeOf(obj);
        // Objects with no prototype (e.g., `Object.create( null )`) are plain
        if (!proto) {
            return true;
        }
        // Objects with prototype are plain iff they were constructed by a global Object function
        Ctor = ({}).hasOwnProperty.call(proto, "constructor") && proto.constructor;
        return typeof Ctor === "function" && ({}).toString.call(Ctor) === ({}).toString.call(Object);
    };
    var rbracket = /\[\]$/;
    var isFunction = function isFunction(obj) {
        return typeof obj === "function" && typeof obj.nodeType !== "number";
    };
    var isWindow = function isWindow(obj) {
        return obj != null && obj === obj.window;
    };
    var isArrayLike = function (obj) {
        var length = !!obj && "length" in obj && obj.length,
            type = getType(obj);
        if (isFunction(obj) || isWindow(obj)) {
            return false;
        }
        return type === "array" || length === 0 ||
            typeof length === "number" && length > 0 && (length - 1) in obj;
    }
    var each = function (obj, callback) {
        var length, i = 0;
        if (isArrayLike(obj)) {
            length = obj.length;
            for (; i < length; i++) {
                if (callback.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                if (callback.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        }
        return obj;
    }
    var buildParams = function (prefix, obj, traditional, add) {
        var name;
        if (Array.isArray(obj)) {
            // Serialize array item.
            each(obj, function (i, v) {
                if (traditional || rbracket.test(prefix)) {
                    // Treat each array item as a scalar.
                    add(prefix, v);
                } else {
                    // Item is non-scalar (array or object), encode its numeric index.
                    buildParams(
                        prefix + "[" + (typeof v === "object" && v != null ? i : "") + "]",
                        v,
                        traditional,
                        add
                    );
                }
            });
        } else if (!traditional && getType(obj) === "object") {
            // Serialize object item.
            for (name in obj) {
                buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
            }
        } else {
            // Serialize scalar item.
            add(prefix, obj);
        }
    }
    var prefix,
        s = [],
        add = function (key, valueOrFunction) {
            // If value is a function, invoke it and use its return value
            var value = typeof valueOrFunction == 'function' ?
                valueOrFunction() :
                valueOrFunction;
            s[s.length] = encodeURIComponent(key) + "=" +
                encodeURIComponent(value == null ? "" : value);
        };
    if (a == null) {
        return "";
    }

    // If an array was passed in, assume that it is an array of form elements.
    if (Array.isArray(a) || (a.jquery && !isPlainObject(a))) {
        // Serialize the form elements
        each(a, function () {
            add(this.name, this.value);
        });
    } else {
        // If traditional, encode the "old" way (the way 1.3.2 or older
        // did it), otherwise encode params recursively.
        for (prefix in a) {
            buildParams(prefix, a[prefix], traditional, add);
        }
    }
    // Return the resulting serialization
    return s.join("&");
}

3.获取url参数（jQuery代码）

function getUrlParams(queryString) {
    if (!queryString) {
        return;
    }
    if (queryString.search(/\?/) > -1) {
        queryString = queryString.split('?')[1];
    }else{
        return {};
    }
    // var queryStringArr = decodeURIComponent(queryString).split('&');
    var queryStringArr = queryString.split('&');
    var res = {};
    var reg = /\[\]$/;
    queryStringArr.forEach(function (item) {
        var itemArr = item.split('=');
        var name = decodeURIComponent(itemArr[0]);
        var value = decodeURIComponent(itemArr[1]);
        // 如果是数字则将其转换成number类型
        if (/^\d+$/.test(value) && (value.length < 11)) {
            value = value * 1;
        }
        // 判断是否是多选的
        if (reg.test(name)) {
            name = name.replace(/\[\]/, '');
            if (res[name]) {
                res[name].push(value);
            } else {
                res[name] = [value];
            }
        } else {
            res[name] = value;
        }
    });
    return res;
}

4.清除字符串两端空格，包含换行符、制表符

function trim (str) {
    if (str.length === 0) {
      return str;
    }
    str += '';
    // 清除字符串两端空格，包含换行符、制表符
    return str.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, '');
}

5.将科学计数法的值转换成正常数字

 function toNonExponential (num) {
    var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);
    return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
  }

6.根据指定url获取url的域名

function getBaseUrl (_url) {
    if(!_url){ return ''; }
    let aEle = document.createElement('a');
    let url = '';
    aEle.href = _url;
    url += aEle.protocol + '//' + aEle.host;
    aEle = null;
    return url;
}

7.获取url的基本信息

function getUrlInfo(_url){
    let aEle = document.createElement('a');
    aEle.href = _url || location.href;
    let obj = {
      protocol: aEle.protocol,
      host: aEle.host,
      pathname: aEle.pathname,
      search: aEle.search,
      hash: aEle.hash
    };
    return obj;
}

8.获取元素在数组中的下标

/**
   * 获取数组中符合条件的元素的索引
   * @param arr 数组
   * @param fn 一个函数，如果函数返回true，则返回该项的下标，如果没有找到则返回-1
   *  */
 function getIndex (arr, fn) {
    if (!arr || arr.length === 0 || !fn || (typeof fn !== 'function')) {
      return -1;
    }

    if (arr.findIndex) {
      return arr.findIndex(fn);
    }
    let len = arr.length;
    let i = 0;
    let index = -1;
    for (; i < len; i++) {
      let item = arr[i];
      if (fn(item, index, arr) === true) {
        index = i;
        break;
      }
    }
    return index;
}

9.获取浏览器使用的语言

function getBrowserLang () {
    var type = navigator.appName;
    let lang = '';
    if (type === 'Netscape') {
      // 获取浏览器配置语言，支持非IE浏览器
      lang = navigator.language;
    } else {
      // 获取浏览器配置语言，支持IE5+ == navigator.systemLanguage
      lang = navigator.userLanguage;
    }
    return lang.toLowerCase();
}

10.给数字前面补零

/**
   * 给数字前面补零
   * 如：padStartZero(10) => 10
   *    padStartZero(5) => 05
   * @param num
   * @returns {string}
   */
 function padStartZero (num) {
    return ('00' + num).substr((num + '').length);
 }

11.截取数字整数位长度（从低位往高位截）

/**
   * 如：limitInt(12, 3) => 12
   *    limitInt(145678, 3) => 145
   *    limitInt(1456.78, 3) => 145.78
   * @param num
   * @param maxSize
   * @returns {string}
   */
function limitInt(num, maxSize) {
    num = num + "";
    let numArr = num.split(".");
    let len = (numArr[0] + "").length;
    if (len > maxSize) {
      numArr[0] = numArr[0].substring(0, maxSize);
    } else {
      return num;
    }
    return numArr.join(".");
}

12.截取数字小数位长度

/**
   * 如：limeDecimal(12, 3) => 12
   *    limeDecimal(14.5678, 3) => 14.557
   *    limeDecimal(1456.78, 3) => 1456.78
   * @param num
   * @param maxSize
   * @returns {string}
   */
function limitDecimal(num, maxSize) {
    if (typeof maxSize == "undefined") {
      return num;
    }
    num = num + "";

    let numArr = num.split(".");
    if (numArr.length == 1) {
      return num;
    }
    if ((numArr[1] + "").length > maxSize) {
      numArr[1] = numArr[1].substr(0, maxSize);
    } else {
      return num;
    }
    return numArr.join(".");
}

13.将数字格式化到指定位数的小数

/**
   * 如：decimalPadZero(10,2) => 10.00
   *     decimalPadZero(10.5,2) => 10.50
   *     decimalPadZero(10.5678,2) => 10.56
   * @param number 数字
   * @param scall 保留小数后多少位
   * @returns {string}
   */
function decimalRetain(number, scale) {
    if (isNaN(Number(number))) {
      return number;
    }
    let result = ['', ''];
    let num = number.toString();
    if (num.indexOf('.') !== -1) {
      let arr = num.split('.');
      result[0] = arr[0];
      if (arr[1].length === scale) {
        result[0] += '.' + arr[1];
      } else if (arr[1].length > scale) {
        result[1] = '.';
        result[1] += arr[1].substring(0, scale - 1);
      } else if (arr[1].length < scale) {
        let zeros = (scale + 1) - arr[1].length;
        result[0] += '.' + arr[1];
        result[1] = Array(zeros).join(0);
      }
    } else {
      result[0] = num;
      result[1] = '.' + (Array(scale + 1).join(0));
    }
    return result.join("").replace(/\.+$/, "");
}

14.数字前面补零

/**
   * 如：padStartZero(10) => 10
   *    padStartZero(5) => 05
   * @param num
   * @returns {string}
   */
function padStartZero (num) {
    return ('00' + num).substr((num + '').length);
}

15.判断对象是否是一个空对象

/**
   * 判断对象是否是一个空对象
   * @param obj
   */
function isEmptyObject (obj) {
    for (var attr in obj) {
      return false;
    }
    return true;
}

16.下载文件

/**
 * 下载文件
 * @param fileData 文件数据
 * @param fileName 文件名称
 * @param mimeType 文件类型
 * @param notSupportCallback 浏览器不支持下载时的回调
 */
function downloadFile (fileData, fileName, mimeType, notSupportCallback) {
    if (!window.Blob) {
        notSupportCallback();
        return;
    }
    // console.log('数据类型：', typeof fileData);
    if (!(fileData instanceof Blob)) {
        // 默认为文本文件
        let type = typeof mimeType === 'string' ? mimeType : 'text/plain'; 
        fileData = new Blob([fileData], { type });
    }
    let eleA = document.createElement('a');
    if ('download' in eleA) { // 非IE下载
        let url = URL.createObjectURL(fileData);
        eleA.href = url;
        eleA.download = fileName;
        eleA.style.display = 'none';
        document.body.append(eleA);
        let timer = setTimeout(() => {
            clearTimeout(timer);
            eleA.click();
            URL.revokeObjectURL(url);
            document.body.removeChild(eleA);
            eleA = null;
            url = null;
        }, 0);
    } else if (navigator.msSaveBlob) { // IE10下载
        navigator.msSaveBlob(fileData, fileName);
    }
}

17.下载网络图片

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.download = factory();
  }
}(this, function () {

    return function download(data, strFileName, strMimeType) {

        var self = window, // this script is only for browsers anyway...
            defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
            mimeType = strMimeType || defaultMime,
            payload = data,
            url = !strFileName && !strMimeType && payload,
            anchor = document.createElement("a"),
            toString = function(a){return String(a);},
            myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
            fileName = strFileName || "download",
            blob,
            reader;
            myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
      
        if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
            payload=[payload, mimeType];
            mimeType=payload[0];
            payload=payload[1];
        }


        if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
            fileName = url.split("/").pop().split("?")[0];
            anchor.href = url; // assign href prop to temp anchor
              if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
                var ajax=new XMLHttpRequest();
                ajax.open( "GET", url, true);
                ajax.responseType = 'blob';
                ajax.onload= function(e){ 
                  download(e.target.response, fileName, defaultMime);
                };
                setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
                return ajax;
            } // end if valid url?
        } // end if url?


        //go ahead and download dataURLs right away
        if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){
        
            if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
                payload=dataUrlToBlob(payload);
                mimeType=payload.type || defaultMime;
            }else{            
                return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
                    navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
                    saver(payload) ; // everyone else can save dataURLs un-processed
            }
            
        }//end if dataURL passed?

        blob = payload instanceof myBlob ?
            payload :
            new myBlob([payload], {type: mimeType}) ;


        function dataUrlToBlob(strUrl) {
            var parts= strUrl.split(/[:;,]/),
            type= parts[1],
            decoder= parts[2] == "base64" ? atob : decodeURIComponent,
            binData= decoder( parts.pop() ),
            mx= binData.length,
            i= 0,
            uiArr= new Uint8Array(mx);

            for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);

            return new myBlob([uiArr], {type: type});
         }

        function saver(url, winMode){

            if ('download' in anchor) { //html5 A[download]
                anchor.href = url;
                anchor.setAttribute("download", fileName);
                anchor.className = "download-js-link";
                anchor.innerHTML = "downloading...";
                anchor.style.display = "none";
                document.body.appendChild(anchor);
                setTimeout(function() {
                    anchor.click();
                    document.body.removeChild(anchor);
                    if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
                }, 66);
                return true;
            }

            // handle non-a[download] safari as best we can:
            if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
                url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
                if(!window.open(url)){ // popup blocked, offer direct download:
                    if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
                }
                return true;
            }

            //do iframe dataURL download (old ch+FF):
            var f = document.createElement("iframe");
            document.body.appendChild(f);

            if(!winMode){ // force a mime that will download:
                url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
            }
            f.src=url;
            setTimeout(function(){ document.body.removeChild(f); }, 333);

        }//end saver




        if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
            return navigator.msSaveBlob(blob, fileName);
        }

        if(self.URL){ // simple fast and modern way using Blob and URL:
            saver(self.URL.createObjectURL(blob), true);
        }else{
            // handle non-Blob()+non-URL browsers:
            if(typeof blob === "string" || blob.constructor===toString ){
                try{
                    return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );
                }catch(y){
                    return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
                }
            }

            // Blob but not URL support:
            reader=new FileReader();
            reader.onload=function(e){
                saver(this.result);
            };
            reader.readAsDataURL(blob);
        }
        return true;
    }; /* end download() */
}));

// 下载一张图片
function downloadImg(url, imgName, fn){
    var x=new XMLHttpRequest();
    var name = imgName ? (imgName + '.png') : (new Date().getTime() + '.png');
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload = function (e) {
        download(x.response, name, "image/png" );
        console.log('图片下载完成');
        if(typeof fn === 'function'){
            fn();
        }
    }
    x.send();
}

// 批量下载
function downloadImgBatch(imgArr){
    let timer = setInterval(function () {
        console.log('imgArr.length', imgArr.length);
        if(imgArr.length > 0){
            let img = imgArr.shift(0);
            downloadImg(img.url, img.name);
        }else{
            clearInterval(timer);
        }
    }, 500);
}

18.格式化日期

/**
   * 格式化日期
   * 如：
   *  formatDate(new Date) => 2018-07-27 14:32:25
   *  formatDate(1532673162672) => 2018-07-27 14:32:25
   *  formatDate("abc1532673162672def") => 2018-07-27 14:32:25
   *  formatDate(new Date, "yyyy年MM月dd日 hh时mm分ss秒") => 2018年07月27日 14时32分25秒
   * @param dateTemp
   * @param format
   * @returns {string}
   */
  function formatDate (dateTemp, format = 'yyyy-MM-dd hh:mm:ss') {
    if(typeof dateTemp === 'undefined' || dateTemp === null){
      console.error('dateTemp不是一个合法的值，dateTemp可以为：时间戳、日期时间字符串、Date对象');
      return;
    }
    if (typeof dateTemp === 'object' && !(/Date/.test(({}).toString.call(dateTemp)))) {
      console.error('dateTemp不是一个Date对象，请检查dateTemp数据类型！');
      return;
    }
    let padStartZero = (num) => {
      return ('00' + num).substr((num + '').length);
    }
    let date;
    if (typeof dateTemp !== 'object') {
      let dateStr = dateTemp + '';
      dateStr = /\d{13,}/.exec(dateStr);
      if (!dateStr) {
        // console.error(dateTemp + ' 不是一个合法的时间戳！');
        date = new Date(dateTemp.replace(/\-/g, '/'));
        // return;
      }else{
        date = new Date(dateStr * 1);
      }
    } else {
      date = dateTemp;
    }
    if (/(y{0,4})/.test(format)) {
      format = format.replace(/y{0,4}/, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let obj = {
      'M+': (date.getMonth() + 1 + ''),
      'd+': (date.getDate() + ''),
      'h+': (date.getHours() + ''),
      'm+': (date.getMinutes() + ''),
      's+': (date.getSeconds() + ''),
    };
    for (let attr in obj) {
      if (new RegExp('(' + attr + ')').test(format)) {
        format = format.replace(new RegExp(attr), padStartZero(obj[attr]).substr(2 - RegExp.$1.length));
      }
    }
    return format;
  }

19.判断是否为mac系统

function isMac() {
    return /macintosh|mac os x/i.test(navigator.userAgent);
}

20.判断是否为windows系统

function isMac() {
    return /macintosh|mac os x/i.test(navigator.userAgent);
}

21.获取浏览器信息

function getBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    var isIE11 = userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/); // IE 11中userAgent已经不包含'msie'所以用'msie'不能判断IE 11
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) || isIE11; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
    var browser = {
      name: '',
      version: undefined
    };
    if (isOpera) {
      browser.name = 'Opera';
    } else if (isChrome) {
      browser.name = 'Chrome';
    } else if (isSafari) {
      browser.name = 'Safari';
    } else if (isFF) {
      browser.name = 'Firefox';
    } else if (isEdge) {
      browser.name = 'Edge';
    } else if (isIE) {
      browser.name = 'IE';
    }


    if (isIE) {
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      var fIEVersion = parseFloat(RegExp["$1"]);
      if (fIEVersion == 7) {
        browser.version = 7;
      } else if (fIEVersion == 8) {
        browser.version = 8;
      } else if (fIEVersion == 9) {
        browser.version = 9;
      } else if (fIEVersion == 10) {
        browser.version = 10;
      } else if (isIE11) { // IE 11中userAgent已经不包含'msie'所以用'msie'不能判断IE 11
        browser.version = 11;
      }
    }

    return browser;
  }

22.获取操作系统信息

function getOsInfo() {
    var userAgent = navigator.userAgent.toLowerCase();
    var name = 'Unknown';
    var version = 'Unknown';
    if (userAgent.indexOf('win') > -1) {
      name = 'Windows';
      if (userAgent.indexOf('windows nt 5.0') > -1) {
        version = 'Windows 2000';
      } else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
        version = 'Windows XP';
      } else if (userAgent.indexOf('windows nt 6.0') > -1) {
        version = 'Windows Vista';
      } else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
        version = 'Windows 7';
      } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
        version = 'Windows 8';
      } else if (userAgent.indexOf('windows nt 6.3') > -1) {
        version = 'Windows 8.1';
      } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows nt 10.0') > -1) {
        version = 'Windows 10';
      } else {
        version = 'Unknown';
      }
    } else if (userAgent.indexOf('iphone') > -1) {
      name = 'iPhone';
    } else if (userAgent.indexOf('mac') > -1) {
      name = 'Mac';
    } else if (userAgent.indexOf('x11') > -1 || userAgent.indexOf('unix') > -1 || userAgent.indexOf('sunname') > -1 || userAgent.indexOf('bsd') > -1) {
      name = 'Unix';
    } else if (userAgent.indexOf('linux') > -1) {
      if (userAgent.indexOf('android') > -1) {
        name = 'Android';
      } else {
        name = 'Linux';
      }
    } else {
      name = 'Unknown';
    }
    return {name, version};
  }

23.ip地址转整形

/**
 * 将IP地址转换为32位无符号整数
 * @param ip ip地址
 */
function ip2long (ip: string) {
  const parts = ip.split('.');
  if (parts.length !== 4) {
      throw new Error('Invalid IP address format');
  }

  return (parseInt(parts[0], 10) * 16777216) + 
         (parseInt(parts[1], 10) * 65536) +
         (parseInt(parts[2], 10) * 256) +
         parseInt(parts[3], 10);
}

24.整形转ip地址

function long2ip ( proper_address ) {
  proper_address = proper_address>>>0;
  var output = false;

  if ( !isNaN ( proper_address ) && ( proper_address >= 0 || proper_address <= 4294967295 ) ) {
    output = Math.floor (proper_address / Math.pow ( 256, 3 ) ) + '.' +
      Math.floor ( ( proper_address % Math.pow ( 256, 3 ) ) / Math.pow ( 256, 2 ) ) + '.' +
      Math.floor ( ( ( proper_address % Math.pow ( 256, 3 ) ) % Math.pow ( 256, 2 ) ) /
        Math.pow ( 256, 1 ) ) + '.' +
      Math.floor ( ( ( ( proper_address % Math.pow ( 256, 3 ) ) % Math.pow ( 256, 2 ) ) %
        Math.pow ( 256, 1 ) ) / Math.pow ( 256, 0 ) );
  }

  return output;
}

25.校验ip与子网掩码是否匹配

function checkMask (ip, subnetMask) {
  // 将 IP 地址和子网掩码转换为 32 位无符号整数
  const ipInt = ip.split('.').reduce((acc, cur) => (acc << 8) + parseInt(cur), 0) >>> 0;
  const subnetInt = subnetMask.split('.').reduce((acc, cur) => (acc << 8) + parseInt(cur), 0) >>> 0;

  // 计算子网地址
  const networkAddress = (ipInt & subnetInt) >>> 0;

  // 如果子网地址等于 IP 地址，则匹配
  return networkAddress === ipInt;
}

使用示例：

console.log(checkMask('192.168.1.100', '255.255.255.0')); // false
console.log(checkMask('192.168.1.100', '255.255.255.255')); // true

26.获取html代码中指定标签的内容

/**
 * 获取html代码中指定标签的内容
 * @param htmlStr html字符串
 * @param tagName 标签名称
 * @param isGetTagInnerContent 是否只获取标签内部的内容
 */
function getTagContent (htmlStr, tagName, isGetTagInnerContent) {
  let reg = new RegExp(`<${tagName}[^>]*>([\\s\\S]*)<\\/${tagName}>`);
  if (isGetTagInnerContent) {
    reg = new RegExp(`(?<=<${tagName}[^>]*>)([\\s\\S]*)(?=<\/${tagName}>)`);
  }
  // console.log('reg', reg);
  let matched = htmlStr.match(reg);
  return matched ? matched[0] : '';
};

使用示例：

27.校验版本号

/**
 * 校验版本号
 * @param version
 * @returns {boolean}
 */
function checkVersion (version) {
  /*
    支持的版本号如：0.1.0、1.0.1、122.12.12、122.12.12-beta.2、122.12.12-beta.2-1
   */
  return /^([1-9]\d*|[0-9])(\.([1-9]\d*|\d))(\.([1-9]*\d|\d)[\-\w\.]*)$/.test(version);
}

28.rgb颜色转rgba

function convertRgbToRgba = (rgb, a) => {
  let hex = rgb.replace(/^\s*#|\s*$/g, "");
  if (hex.length === 3) {
    hex = hex.replace(/(.)/g, "$1$1");
  }
  const r = parseInt(hex.substr(0, 2), 16);
  const g = parseInt(hex.substr(2, 2), 16);
  const b = parseInt(hex.substr(4, 2), 16);
  return `rgba(${r},${g},${b},${a})`;
};

2.DOM常用工具函数

1.绑定事件

/**
   * 绑定事件
   * @param ele dom元素
   * @param eventName 事件名称
   * @param fn 事件回调函数
   */
 function bindEvent (ele, eventName, fn) {
    if (!ele) {
      console.error('on(ele, eventName, fn)函数第一个参数必须是一个dom元素!');
      return;
    }
    if (!eventName || typeof eventName !== 'string') {
      console.error('on(ele, eventName, fn)函数第二个参数必须是一个字符串!');
      return;
    }
    if (!fn || typeof fn !== 'function') {
      console.error('on(ele, eventName, fn)函数第三个参数必须是一个函数!');
      return;
    }
    if (!ele._events) {
      ele._events = {};
    }

    if (!(eventName in ele._events)) {
      ele._events[eventName] = [fn];
      if (document.addEventListener) {
        var eventFn = function (e) {
          var events = ele._events[eventName];
          if (events && events.length > 0) {
            for (var i = 0, len = events.length; i < len; i++) {
              if (events[i]) {
                events[i].call(ele, e);
              }
            }
          }
        };
        ele.addEventListener(eventName, eventFn, false);
        // 把事件回调函数也存起来，这样在移除事件的时候才能真正的把该事件移除掉
        ele._events[eventName + '_fn'] = eventFn;
      } else if (window.attachEvent) {
        var eventFn = function () {
          var events = ele._events[eventName];
          var e = window.event;
          e.preventDefault = function () {
            e.returnValue = false;
          };
          e.stopPropagation = function () {
            e.cancelBubble = true;
          };
          for (var i = 0, len = events.length; i < len; i++) {
            events[i].call(ele, e);
          }
        };
        ele.attachEvent('on' + eventName, eventFn);
        ele._events[eventName + '_fn'] = eventFn;
      }
    } else {
      //ele._events[eventName] = [fn];
      var index = this.getIndex(ele._events[eventName], function (item) {
        return item === fn;
      });
      if (index < 0 || typeof index === 'undefined') {
        ele._events[eventName].push(fn);
      }
    }
}

2.解绑事件

/**
   * 解绑事件
   * @param ele dom元素
   * @param eventName 事件名称
   * @param fn 事件回调函数
   */
function unBindEvent (ele, eventName, fn) {
    if (!ele) {
      console.error('off(ele, eventName, fn)函数第一个参数必须是一个dom元素!');
      return;
    }
    if (!eventName || typeof eventName !== 'string') {
      console.error('off(ele, eventName, fn)函数第二个参数必须是一个字符串!');
      return;
    }
    if (!ele._events) {
      return;
    }
    if (!eventName) {
      return;
    }
    console.log('off', eventName, ele);
    var events = ele._events[eventName];
    var eventFn = ele._events[eventName + '_fn'];
    // 如果只传递了事件名称而未传递具体的事件，则将指定事件名称的所有回调函数全部清除
    if (eventName && !fn) {
      if (document.removeEventListener) {
        //for(var i = 0, len = events.length; i < len; i++){
        ele.removeEventListener(eventName, eventFn, false);
        //}
      } else if (window.detachEvent) {
        //for(var i = 0, len = events.length; i < len; i++){
        ele.detachEvent('on' + eventName, eventFn);
        //}
      }
      delete ele._events[eventName];
      delete ele._events[eventName + '_fn'];
    } else if (eventName && fn) {
      if (!events) {
        return;
      }
      if (document.removeEventListener) {
        var index = this.getIndex(events, function (item) {
          return item === fn;
        });
        if (index > -1) {
          events.splice(index, 1);
        }
        if (events.length === 0) {
          delete ele._events[eventName];
          delete ele._events[eventName + '_fn'];
        }
      } else if (window.detachEvent) {
        if (!events) {
          return;
        }
        var index = this.getIndex(events, function (item) {
          return item === fn;
        });
        if (index > -1) {
          events.splice(index, 1);
        }
        if (events.length === 0) {
          delete ele._events[eventName];
          delete ele._events[eventName + '_fn'];
        }
      }
    }
    events = null;
}

3.给指定元素添加class

/**
   * @param ele
   * @param classname
   */
function addClass (ele, classname) {
    if (!ele || !classname || ele.nodeType !== 1) {
      return;
    }
    let classArr = classname.split(' ');
    if (ele.classList) {
      for (var i = 0, len = classArr.length; i < len; i++) {
        let item = classArr[i];
        if (!ele.classList.contains(item)) {
          ele.classList.add(item);
        }
      }
      return ele;
    } else {
      let classNameArr = ele.className && ele.className.length > 0 ? ele.className.split(' ') : [];
      if (classNameArr.length === 0) {
        ele.className = classname;
        return;
      }
      // 合并两个数组
      Array.prototype.push.apply(classNameArr, classArr);
      classNameArr = tool.arrayNoReapeat(classNameArr);
      ele.className = classNameArr.join(' ');
      return ele;
    }
}

4.给指定元素移除class

/**
   * @param ele
   * @param classname
   */
function removeClass (ele, classname) {
    if (!ele || !classname || ele.nodeType !== 1) {
      return;
    }
    let classArr = classname.split(' ');
    if (ele.classList) {
      for (var i = 0, len = classArr.length; i < len; i++) {
        let item = classArr[i];
        if (ele.classList.contains(item)) {
          ele.classList.remove(item);
        }
      }
      return ele;
    } else {
      let classNameArr = ele.className && ele.className.length > 0 ? ele.className.split(' ') : [];
      if (classNameArr.length === 0) {
        return;
      }
      for (var i = classNameArr.length; i >= 0; i--) {
        for (var j = 0, len2 = classArr.length; j < len2; j++) {
          if (classNameArr[i] === classArr[j]) {
            classNameArr.splice(i, 1);
          }
        }
      }
      ele.className = classNameArr.join(' ');
      return ele;
    }
}

5.判断元素是否包含指定className

/**
   * 判断元素是否包含指定className
   * @param ele dom元素
   * @param className className
   * @returns {boolean}
   */
function hasClass (ele, className) {
    if (!ele || !ele.nodeName) {
      console.error('ele 必须是一个dom元素');
      return;
    }
    if (!className) {
      console.error('className 必须是一个字符串');
      return;
    }
    if (ele.classList) {
      return ele.classList.contains(className);
    } else {
      let flag = false;
      let classNameArr = ele.className.split(' ');
      for (let i = 0, len = classNameArr.length; i < len; i++) {
        if (classNameArr[i] === className) {
          flag = true;
          break;
        }
      }
      return flag;
    }
}

6.获取元素的css属性值

/**
   * 获取元素的css属性值
   * @param ele dom元素
   * @param cssAttribute css属性名称
   */
function getStyle (ele, cssAttribute) {
    if (!ele || !ele.nodeName) {
      console.error('ele 必须是一个dom元素');
      return;
    }
    if (!cssAttribute) {
      console.error('cssAttribute 必须是一个字符串');
      return;
    }
    let val = '';
    if (window.getComputedStyle) {
      val = window.getComputedStyle(ele, null)[cssAttribute];
    } else if (ele.currentStyle) {
      val = ele.currentStyle[cssAttribute];
    }
    if (!isNaN(parseFloat(val))) {
      return parseFloat(val);
    } else {
      return val;
    }
}

7.给元素设置css属性

/**
   * 给元素设置css属性
   * @param ele dom元素
   * @param attr css属性名
   * @param val css属性值，如果不传递attr参数，则该参数可以为一个对象，就像jquery的css()方法一样
   */
function setCss (ele, attrs, val) {
    if (!ele || !ele.nodeName) {
      console.error('ele 必须是一个dom元素');
      return;
    }
    let type1 = ({}).toString.call(attrs);
    // 需要字段加单位的css属性
    let autoAddUnitAttr = {
      width: 1, height: 1, margin: 1, padding: 1,
      borderRadius: 1, top: 1, left: 1,
      marginLeft: 1, marginRight: 1, marginTop: 1, marginBottom: 1,
      right: 1, bottom: 1,
      paddingLeft: 1, paddingRight: 1, paddingTop: 1, paddingBottom: 1,
      borderTopLeftRadius: 1, borderTopRightRadius: 1,
      borderBottomLeftRadius: 1, borderBottomRightRadius: 1,
      fontSize: 1, lineHeight: 1, textIndent: 1,
      minWidth: 1, maxWith: 1
    };
    if (type1 === '[object String]' && typeof val !== 'undefined') {
      attrs = attrs.replace(/\-(\w)/g, function (matched, $1) {
        return $1.toUpperCase();
      });
      if (attrs in autoAddUnitAttr && !isNaN(Number(val))) {
        ele.style[attrs] = val + 'px';
      } else {
        ele.style[attrs] = val;
      }
    } else if (type1 === '[object Object]') {
      let style = ele.style;
      for (let attr in attrs) {
        let val2 = attrs[attr];
        let isNumber = Number(val2);

        attr = attr.replace(/\-(\w)/g, function (matched, $1) {
          return $1.toUpperCase();
        });

        if (attr in autoAddUnitAttr && !isNaN(isNumber)) {
          style[attr] = val2 + 'px';
        } else {
          style[attr] = val2;
        }
      }
    }
}

8.获取兄弟节点

/**
   * 获取兄弟节点
   * @param elm
   * @returns {Array}
   */
function siblings (elm) {
    let a = [];
    let p = elm.parentNode.children;
    for (let i = 0, pl = p.length; i < pl; i++) {
      if (p[i] !== elm) a.push(p[i]);
    }
    return a;
}

9.判断两个元素是否是包含关系

/**
   * 判断两个元素是否是包含关系
   * @param ele 父元素
   * @param childEle 子元素
   * @returns {Boolean}
   */
function elementContains (ele, childEle) {
    if (ele === childEle) {
      return false;
    }
    if (typeof ele.contains === 'function') {
      return ele.contains(childEle);
    } else {
      while (true) {
        if (!childEle) {
          return false;
        }
        if (childEle === ele) {
          return true;
        } else {
          childEle = childEle.parentNode;
        }
      }
      return false;
    }
}

10.将滚动条滚动到指定元素所在位置

/**
   * 将滚动条滚动到指定元素所在位置
   * @param ele dom元素
   * @param extraTop 额外的高度，比如在元素的位置基础上加10px，或减10px
   * @param autofocus 如果是表单元素的话是否滚动完后自动获得焦点
   */
function scrollToElement (ele, extraTop, autofocus) {
    if (!ele || !ele.nodeName) {
      console.error('ele 必须是一个dom元素');
      return;
    }
    autofocus = !!autofocus;
    let top = ele.offsetTop;
    let offsetParent = ele.offsetParent;

    while (offsetParent != null) {
      top += offsetParent.offsetTop;
      offsetParent = offsetParent.offsetParent;
    }
    top += extraTop;
    window.scrollTo(0, top);

    if (autofocus && ele.focus) {
      ele.focus();
    }
}

11.获取元素的指定父级元素

/**
   * 获取元素的指定父级元素
   * @param el dom 元素
   * @param className 父元素的class name
   * @returns {dom、undefined}
   */
function parents (el, className) {
    if (!el || !el.nodeName || !className) {
      return;
    }
    var classNameArr = className.split(' ');
    var parent = el.parentElement;

    while (parent) {
      var flag = true;
      for (var i = 0, len = classNameArr.length; i < len; i++) {
        if (!this.hasClass(parent, classNameArr[i])) {
          flag = false;
          break;
        }
      }
      if (flag) {
        return parent;
      } else {
        parent = parent.parentElement;
      }
    }
}

12.获取元素距浏览器最顶部及最左边的距离

/**
   * 获取元素距浏览器最顶部及最左边的距离
   * @param ele dom元素
   */
function offset (ele) {
    let positon = {
      top: 0,
      left: 0,
    };
    let offsetParent = ele.offsetParent;
    positon.top = ele.offsetTop;
    positon.left = ele.offsetLeft;
    while (offsetParent != null) {
      positon.top += offsetParent.offsetTop;
      positon.left += offsetParent.offsetLeft;
      offsetParent = offsetParent.offsetParent;
    }
    return positon;
}

13.获取浏览器滚动条的位置

function scrollTop () {
    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}