收藏，日常必备的JS工具函数大全

Myth丶恋晨 2023-01-13 10:10 80阅读 0赞

![0e3ea6753aa9b3f9211e180c385eef26.png][]

来源：https://github.com/Wscats/CV/issues/27

# 为元素添加on方法    #

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

# 为元素添加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;
    };

# 转义html标签 #

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

# 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>`;

# 跨浏览器绑定事件 #

# 加入收藏夹 #

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

# 动态加载脚本文件 #

# 返回顶部的通用方法 #

# 实现base64解码 #

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

# 全角半角转换 #

//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("");
    }

# 版本对比 #

# 压缩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];
    }

# 获取当前路径 #

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

# 字符串长度截取 #

# 时间日期格式转换 #

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"));

# 跨浏览器删除事件 #

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

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

# 返回脚本内容 #

# 格式化CSS样式代码 #

# 获取cookie值 #

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

# 获得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];
    }

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

# 获取页面高度 #

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);
    }

# 获取页面scrollLeft #

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

# 获取页面scrollTop #

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

# 获取页面可视高度 #

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

# 获取页面可视宽度 #

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

# 获取页面宽度 #

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);
    }

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

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

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

# 获取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;
    }

# 检验URL链接是否有效 #

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

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);
    }

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

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

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

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

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

# 判断是否为数字类型 #

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

# 是否是某类手机型号 #

// 用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;
    };

# 判断是否移动设备 #

# 判断吗是否手机号码 #

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;
    }

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

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

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

# 判断是否Touch屏幕 #

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

# 判断是否为网址 #

# 判断是否打开视窗 #

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

# 加载样式文件 #

# 替换地址栏 #

# 解决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;
    }

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

# 将键值对拼接成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('&'))
     }

# 去掉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;
    }

# 替换全部 #

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

# resize的操作 #

# 滚动到顶部 #

// 使用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);
      }
    }

# 设置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;";
    }

# 设为首页 #

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

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;
    }

# 延时执行 #

// 比如 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);

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

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

# 清除脚本内容 #

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

# 时间个性化输出功能 #

/*
    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;
    }

# 全角转换为半角函数 #

# 半角转换为全角函数 #

# 金额大写转换函数 #

# 清除空格 #

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*|　*)$/, "");
    }

# 随机数时间戳 #

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

# 实现utf8解码 #

![8748a31fa6e5826cae806d8fe9870c3b.png][]

[0e3ea6753aa9b3f9211e180c385eef26.png]: /images/20221022/94ea608ab4eb45b3b8a2b5cbca81c43d.png
[8748a31fa6e5826cae806d8fe9870c3b.png]: /images/20221022/0210864be2e74db7a19f57ffb9a96fb2.png