JavaScript 常用工具函数

亦凉 2022-10-13 05:08 172阅读 0赞

![在这里插入图片描述][20210706112325778.gif_pic_center]

### 目录 ###

*  1. 为元素添加 on 方法
 *  2. 为元素添加trigger方法
 *  3. 转义 HTML 标签
 *  4. HTML 标签转义
 *  5. 跨浏览器绑定事件
 *  5. 加入收藏夹
 *  7. 提取页面代码中所有网址
 *  8. 动态加载脚本文件
 *  9. 返回顶部的通用方法
 *  10. 实现base64解码
 *  11. 确认是否是键盘有效输入值
 *  12. 全角半角转换
 *  13. 版本对比
 *  14. 压缩CSS样式代码
 *  15. 获取当前路径
 *  16. 字符串长度截取
 *  17. 时间日期格式转换
 *  18. 跨浏览器删除事件
 *  19. 判断是否以某个字符串结束
 *  20. 返回脚本内容
 *  21. 格式化CSS样式代码
 *  22. 获取Cookie值
 *  23. 获得URL中GET参数值
 *  24. 获取移动设备初始化大小
 *  25. 获取页面高度
 *  26. 获取页面scrollLeft
 *  27. 获取页面scrollTop
 *  28. 获取页面可视高度
 *  29. 获取页面可视宽度
 *  30. 获取页面宽度
 *  31. 获取移动设备屏幕宽度
 *  32. 获取网页被卷去的位置
 *  33. 获取URL上的参数
 *  34. 检验URL链接是否有效
 *  35. 获取窗体可见范围的宽与高
 *  36. 获取移动设备最大化大小
 *  37. 判断是否安卓移动设备访问
 *  38. 判断是否苹果移动设备访问
 *  39. 判断是否为数字类型
 *  40. 是否是某类手机型号
 *  41. 判断是否移动设备
 *  42. 判断是否手机号码
 *  43. 判断是否是移动设备访问
 *  44. 判断鼠标是否移出事件
 *  45. 判断是否Touch屏幕
 *  46. 判断是否为网址
 *  47. 判断是否打开视窗
 *  48. 加载样式文件
 *  49. 替换地址栏
 *  50. 解决offsetX兼容性问题
 *  51. 打开一个窗体通用方法
 *  52. 将键值对拼接成URL带参数
 *  53. 去掉url前缀
 *  54. 替换全部
 *  55. resize的操作
 *  56. 滚动到顶部
 *  57. 设置Cookie值
 *  58. 设为首页
 *  59. 按字母排序，对每行进行数组排序
 *  60. 延时执行
 *  61. 判断是否以某个字符串开头
 *  62. 清除脚本内容
 *  63. 时间个性化输出功能
 *  64. 全角转换为半角函数
 *  65. 半角转换为全角
 *  66. 金额大写转换函数
 *  67. 清除空格
 *  68. 随机数时间戳
 *  69. 实现utf8解码

--------------------

# 1. 为元素添加 on 方法 #

Element.prototype.on = Element.prototype.addEventListener;
    
    NodeList.prototype.on = function (event, fn) { 、
        []['forEach'].call(this, function (el) { 
            el.on(event, fn);
        });
        return this;
    };

# 2. 为元素添加trigger方法 #

Element.prototype.trigger = function(type, data) { 
      var event = document.createEvent("HTMLEvents");
      event.initEvent(type, true, true);
      event.data = data || { };
      event.eventName = type;
      event.target = this;
      this.dispatchEvent(event);
      return this;
    };
    
    NodeList.prototype.trigger = function(event) { 
      []["forEach"].call(this, function(el) { 
        el["trigger"](event);
      });
      return this;
    };

# 3. 转义 HTML 标签 #

function HtmlEncode(text) { 
      return text
        .replace(/&/g, "&")
        .replace(/\"/g, '"')
        .replace(/</g, "<")
        .replace(/>/g, ">");
    }

# 4. HTML 标签转义 #

// HTML 标签转义
    // @param {Array.<DOMString>} templateData 字符串类型的tokens
    // @param {...} ..vals 表达式占位符的运算结果tokens
    //
    function SaferHTML(templateData) { 
      var s = templateData[0];
      for (var i = 1; i < arguments.length; i++) { 
        var arg = String(arguments[i]);
        // Escape special characters in the substitution.
        s += arg
          .replace(/&/g, "&")
          .replace(/</g, "<")
          .replace(/>/g, ">");
        // Don't escape special characters in the template.
        s += templateData[i];
      }
      return s;
    }
    // 调用
    var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

# 5. 跨浏览器绑定事件 #

# 5. 加入收藏夹 #

# 7. 提取页面代码中所有网址 #

# 8. 动态加载脚本文件 #

# 9. 返回顶部的通用方法 #

# 10. 实现base64解码 #

# 11. 确认是否是键盘有效输入值 #

# 12. 全角半角转换 #

//iCase: 0全到半，1半到全，其他不转化
    function chgCase(sStr, iCase) { 
      if (
        typeof sStr != "string" ||
        sStr.length <= 0 ||
        !(iCase === 0 || iCase == 1)
      ) { 
        return sStr;
      }
      var i,
        oRs = [],
        iCode;
      if (iCase) { 
        /*半->全*/
        for (i = 0; i < sStr.length; i += 1) { 
          iCode = sStr.charCodeAt(i);
          if (iCode == 32) { 
            iCode = 12288;
          } else if (iCode < 127) { 
            iCode += 65248;
          }
          oRs.push(String.fromCharCode(iCode));
        }
      } else { 
        /*全->半*/
        for (i = 0; i < sStr.length; i += 1) { 
          iCode = sStr.charCodeAt(i);
          if (iCode == 12288) { 
            iCode = 32;
          } else if (iCode > 65280 && iCode < 65375) { 
            iCode -= 65248;
          }
          oRs.push(String.fromCharCode(iCode));
        }
      }
      return oRs.join("");
    }

# 13. 版本对比 #

# 14. 压缩CSS样式代码 #

function compressCss(s) { 
      //压缩代码
      s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
      s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
      s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
      s = s.replace(/;\s*;/g, ";"); //清除连续分号
      s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
      return s == null ? "" : s[1];
    }

# 15. 获取当前路径 #

var currentPageUrl = "";
    if (typeof this.href === "undefined") { 
      currentPageUrl = document.location.toString().toLowerCase();
    } else { 
      currentPageUrl = this.href.toString().toLowerCase();
    }

# 16. 字符串长度截取 #

# 17. 时间日期格式转换 #

Date.prototype.format = function(formatStr) { 
      var str = formatStr;
      var Week = ["日", "一", "二", "三", "四", "五", "六"];
      str = str.replace(/yyyy|YYYY/, this.getFullYear());
      str = str.replace(
        /yy|YY/,
        this.getYear() % 100 > 9
          ? (this.getYear() % 100).toString()
          : "0" + (this.getYear() % 100)
      );
      str = str.replace(
        /MM/,
        this.getMonth() + 1 > 9
          ? (this.getMonth() + 1).toString()
          : "0" + (this.getMonth() + 1)
      );
      str = str.replace(/M/g, this.getMonth() + 1);
      str = str.replace(/w|W/g, Week[this.getDay()]);
      str = str.replace(
        /dd|DD/,
        this.getDate() > 9 ? this.getDate().toString() : "0" + this.getDate()
      );
      str = str.replace(/d|D/g, this.getDate());
      str = str.replace(
        /hh|HH/,
        this.getHours() > 9 ? this.getHours().toString() : "0" + this.getHours()
      );
      str = str.replace(/h|H/g, this.getHours());
      str = str.replace(
        /mm/,
        this.getMinutes() > 9
          ? this.getMinutes().toString()
          : "0" + this.getMinutes()
      );
      str = str.replace(/m/g, this.getMinutes());
      str = str.replace(
        /ss|SS/,
        this.getSeconds() > 9
          ? this.getSeconds().toString()
          : "0" + this.getSeconds()
      );
      str = str.replace(/s|S/g, this.getSeconds());
      return str;
    };
    
    // 或
    Date.prototype.format = function(format) { 
      var o = { 
        "M+": this.getMonth() + 1, //month
        "d+": this.getDate(), //day
        "h+": this.getHours(), //hour
        "m+": this.getMinutes(), //minute
        "s+": this.getSeconds(), //second
        "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
        S: this.getMilliseconds() //millisecond
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o) { 
        if (new RegExp("(" + k + ")").test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
          );
      }
      return format;
    };
    alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

# 18. 跨浏览器删除事件 #

# 19. 判断是否以某个字符串结束 #

String.prototype.endWith = function(s) { 
      var d = this.length - s.length;
      return d >= 0 && this.lastIndexOf(s) == d;
    };

# 20. 返回脚本内容 #

# 21. 格式化CSS样式代码 #

# 22. 获取Cookie值 #

function getCookie(name) { 
      var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
      if (arr != null) return unescape(arr[2]);
      return null;
    }

# 23. 获得URL中GET参数值 #

// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
    function getGet() { 
      querystr = window.location.href.split("?");
      if (querystr[1]) { 
        GETs = querystr[1].split("&");
        GET = [];
        for (i = 0; i < GETs.length; i++) { 
          tmp_arr = GETs.split("=");
          key = tmp_arr[0];
          GET[key] = tmp_arr[1];
        }
      }
      return querystr[1];
    }

# 24. 获取移动设备初始化大小 #

# 25. 获取页面高度 #

function getPageHeight() { 
      var g = document,
        a = g.body,
        f = g.documentElement,
        d = g.compatMode == "BackCompat" ? a : g.documentElement;
      return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
    }

# 26. 获取页面scrollLeft #

function getPageScrollLeft() { 
      var a = document;
      return a.documentElement.scrollLeft || a.body.scrollLeft;
    }

# 27. 获取页面scrollTop #

function getPageScrollTop() { 
      var a = document;
      return a.documentElement.scrollTop || a.body.scrollTop;
    }

# 28. 获取页面可视高度 #

function getPageViewHeight() { 
      var d = document,
        a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
      return a.clientHeight;
    }

# 29. 获取页面可视宽度 #

function getPageViewWidth() { 
      var d = document,
        a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
      return a.clientWidth;
    }

# 30. 获取页面宽度 #

function getPageWidth() { 
      var g = document,
        a = g.body,
        f = g.documentElement,
        d = g.compatMode == "BackCompat" ? a : g.documentElement;
      return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
    }

# 31. 获取移动设备屏幕宽度 #

# 32. 获取网页被卷去的位置 #

function getScrollXY() { 
      return document.body.scrollTop
        ? { 
            x: document.body.scrollLeft,
            y: document.body.scrollTop
          }
        : { 
            x: document.documentElement.scrollLeft,
            y: document.documentElement.scrollTop
          };
    }

# 33. 获取URL上的参数 #

// 获取URL中的某参数值,不区分大小写
    // 获取URL中的某参数值,不区分大小写,
    // 默认是取'hash'里的参数，
    // 如果传其他参数支持取‘search’中的参数
    // @param {String} name 参数名称
    export function getUrlParam(name, type = "hash") { 
      let newName = name,
        reg = new RegExp("(^|&)" + newName + "=([^&]*)(&|$)", "i"),
        paramHash = window.location.hash.split("?")[1] || "",
        paramSearch = window.location.search.split("?")[1] || "",
        param;
    
      type === "hash" ? (param = paramHash) : (param = paramSearch);
    
      let result = param.match(reg);
    
      if (result != null) { 
        return result[2].split("/")[0];
      }
      return null;
    }

# 34. 检验URL链接是否有效 #

# 35. 获取窗体可见范围的宽与高 #

function getViewSize() { 
      var de = document.documentElement;
      var db = document.body;
      var viewW = de.clientWidth == 0 ? db.clientWidth : de.clientWidth;
      var viewH = de.clientHeight == 0 ? db.clientHeight : de.clientHeight;
      return Array(viewW, viewH);
    }

# 36. 获取移动设备最大化大小 #

# 37. 判断是否安卓移动设备访问 #

function isAndroidMobileDevice() { 
      return /android/i.test(navigator.userAgent.toLowerCase());
    }

# 38. 判断是否苹果移动设备访问 #

function isAppleMobileDevice() { 
      return /iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase());
    }

# 39. 判断是否为数字类型 #

function isDigit(value) { 
      var patrn = /^[0-9]*$/;
      if (patrn.exec(value) == null || value == "") { 
        return false;
      } else { 
        return true;
      }
    }

# 40. 是否是某类手机型号 #

// 用devicePixelRatio和分辨率判断
    const isIphonex = () => { 
      // X XS, XS Max, XR
      const xSeriesConfig = [
        { 
          devicePixelRatio: 3,
          width: 375,
          height: 812
        },
        { 
          devicePixelRatio: 3,
          width: 414,
          height: 896
        },
        { 
          devicePixelRatio: 2,
          width: 414,
          height: 896
        }
      ];
      // h5
      if (typeof window !== "undefined" && window) { 
        const isIOS = /iphone/gi.test(window.navigator.userAgent);
        if (!isIOS) return false;
        const {  devicePixelRatio, screen } = window;
        const {  width, height } = screen;
        return xSeriesConfig.some(
          item =>
            item.devicePixelRatio === devicePixelRatio &&
            item.width === width &&
            item.height === height
        );
      }
      return false;
    };

# 41. 判断是否移动设备 #

# 42. 判断是否手机号码 #

function isMobileNumber(e) { 
      var i =
          "134,135,136,137,138,139,150,151,152,157,158,159,187,188,147,182,183,184,178",
        n = "130,131,132,155,156,185,186,145,176",
        a = "133,153,180,181,189,177,173,170",
        o = e || "",
        r = o.substring(0, 3),
        d = o.substring(0, 4),
        s =
          !!/^1\d{10}$/.test(o) &&
          (n.indexOf(r) >= 0
            ? "联通"
            : a.indexOf(r) >= 0
            ? "电信"
            : "1349" == d
            ? "电信"
            : i.indexOf(r) >= 0
            ? "移动"
            : "未知");
      return s;
    }

# 43. 判断是否是移动设备访问 #

function isMobileUserAgent() { 
      return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
        window.navigator.userAgent.toLowerCase()
      );
    }

# 44. 判断鼠标是否移出事件 #

# 45. 判断是否Touch屏幕 #

function isTouchScreen() { 
      return (
        "ontouchstart" in window ||
        (window.DocumentTouch && document instanceof DocumentTouch)
      );
    }

# 46. 判断是否为网址 #

# 47. 判断是否打开视窗 #

function isViewportOpen() { 
      return !!document.getElementById("wixMobileViewport");
    }

# 48. 加载样式文件 #

# 49. 替换地址栏 #

# 50. 解决offsetX兼容性问题 #

// 针对火狐不支持offsetX/Y
    function getOffset(e) { 
      var target = e.target, // 当前触发的目标对象
        eventCoord,
        pageCoord,
        offsetCoord;
    
      // 计算当前触发元素到文档的距离
      pageCoord = getPageCoord(target);
    
      // 计算光标到文档的距离
      eventCoord = { 
        X: window.pageXOffset + e.clientX,
        Y: window.pageYOffset + e.clientY
      };
    
      // 相减获取光标到第一个定位的父元素的坐标
      offsetCoord = { 
        X: eventCoord.X - pageCoord.X,
        Y: eventCoord.Y - pageCoord.Y
      };
      return offsetCoord;
    }
    
    function getPageCoord(element) { 
      var coord = {  X: 0, Y: 0 };
      // 计算从当前触发元素到根节点为止，
      // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和
      while (element) { 
        coord.X += element.offsetLeft;
        coord.Y += element.offsetTop;
        element = element.offsetParent;
      }
      return coord;
    }

# 51. 打开一个窗体通用方法 #

# 52. 将键值对拼接成URL带参数 #

export default const fnParams2Url = obj=> { 
          let aUrl = []
          let fnAdd = function(key, value) { 
            return key + '=' + value
          }
          for (var k in obj) { 
            aUrl.push(fnAdd(k, obj[k]))
          }
          return encodeURIComponent(aUrl.join('&'))
     }

# 53. 去掉url前缀 #

function removeUrlPrefix(a) { 
      a = a
        .replace(/：/g, ":")
        .replace(/．/g, ".")
        .replace(/／/g, "/");
      while (
        trim(a)
          .toLowerCase()
          .indexOf("http://") == 0
      ) { 
        a = trim(a.replace(/http:\/\//i, ""));
      }
      return a;
    }

# 54. 替换全部 #

String.prototype.replaceAll = function(s1, s2) { 
      return this.replace(new RegExp(s1, "gm"), s2);
    };

# 55. resize的操作 #

# 56. 滚动到顶部 #

// 使用document.documentElement.scrollTop 或 document.body.scrollTop 获取到顶部的距离，从顶部
    // 滚动一小部分距离。使用window.requestAnimationFrame()来滚动。
    // @example
    // scrollToTop();
    function scrollToTop() { 
      var c = document.documentElement.scrollTop || document.body.scrollTop;
    
      if (c > 0) { 
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
      }
    }

# 57. 设置Cookie值 #

function setCookie(name, value, Hours) { 
      var d = new Date();
      var offset = 8;
      var utc = d.getTime() + d.getTimezoneOffset() * 60000;
      var nd = utc + 3600000 * offset;
      var exp = new Date(nd);
      exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
      document.cookie =
        name +
        "=" +
        escape(value) +
        ";path=/;expires=" +
        exp.toGMTString() +
        ";domain=360doc.com;";
    }

# 58. 设为首页 #

# 59. 按字母排序，对每行进行数组排序 #

function setSort() { 
      var text = K1.value
        .split(/[\r\n]/)
        .sort()
        .join("\r\n"); //顺序
      var test = K1.value
        .split(/[\r\n]/)
        .sort()
        .reverse()
        .join("\r\n"); //反序
      K1.value = K1.value != text ? text : test;
    }

# 60. 延时执行 #

// 比如 sleep(1000) 意味着等待1000毫秒，还可从 Promise、Generator、Async/Await 等角度实现。
    // Promise
    const sleep = time => { 
      return new Promise(resolve => setTimeout(resolve, time));
    };
    
    sleep(1000).then(() => { 
      console.log(1);
    });
    
    // Generator
    function* sleepGenerator(time) { 
      yield new Promise(function(resolve, reject) { 
        setTimeout(resolve, time);
      });
    }
    
    sleepGenerator(1000)
      .next()
      .value.then(() => { 
        console.log(1);
      });
    
    //async
    function sleep(time) { 
      return new Promise(resolve => setTimeout(resolve, time));
    }
    
    async function output() { 
      let out = await sleep(1000);
      console.log(1);
      return out;
    }
    
    output();
    
    function sleep(callback, time) { 
      if (typeof callback === "function") { 
        setTimeout(callback, time);
      }
    }
    
    function output() { 
      console.log(1);
    }
    
    sleep(output, 1000);

# 61. 判断是否以某个字符串开头 #

String.prototype.startWith = function(s) { 
      return this.indexOf(s) == 0;
    };

# 62. 清除脚本内容 #

function stripscript(s) { 
      return s.replace(/<script.*?>.*?<\/script>/gi, "");
    }

# 63. 时间个性化输出功能 #

/* 1、< 60s, 显示为“刚刚” 2、>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 3、>= 60min && < 1day, 显示与当前时间差“今天 XX:XX” 4、>= 1day && < 1year, 显示日期“XX月XX日 XX:XX” 5、>= 1year, 显示具体日期“XXXX年XX月XX日 XX:XX” */
    function timeFormat(time) { 
      var date = new Date(time),
        curDate = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 10,
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        curYear = curDate.getFullYear(),
        curHour = curDate.getHours(),
        timeStr;
    
      if (year < curYear) { 
        timeStr = year + "年" + month + "月" + day + "日 " + hour + ":" + minute;
      } else { 
        var pastTime = curDate - date,
          pastH = pastTime / 3600000;
    
        if (pastH > curHour) { 
          timeStr = month + "月" + day + "日 " + hour + ":" + minute;
        } else if (pastH >= 1) { 
          timeStr = "今天 " + hour + ":" + minute + "分";
        } else { 
          var pastM = curDate.getMinutes() - minute;
          if (pastM > 1) { 
            timeStr = pastM + "分钟前";
          } else { 
            timeStr = "刚刚";
          }
        }
      }
      return timeStr;
    }

# 64. 全角转换为半角函数 #

# 65. 半角转换为全角 #

# 66. 金额大写转换函数 #

# 67. 清除空格 #

String.prototype.trim = function() { 
      var reExtraSpace = /^\s*(.*?)\s+$/;
      return this.replace(reExtraSpace, "$1");
    };
    
    // 清除左空格
    function ltrim(s) { 
      return s.replace(/^(\s*|　*)/, "");
    }
    
    // 清除右空格
    function rtrim(s) { 
      return s.replace(/(\s*|　*)$/, "");
    }

# 68. 随机数时间戳 #

function uniqueId() { 
      var a = Math.random,
        b = parseInt;
      return (
        Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a())
      );
    }

# 69. 实现utf8解码 #

[20210706112325778.gif_pic_center]: /images/20221005/87d4a80fcbf442a68137c42888146073.png