开放、分享、自由、中立、公平网吧论坛公众号APP（送下载币任务） 微信公众号
开启辅助访问 论坛帮助

天下网吧论坛

 找回密码
 注册账号

QQ登录

只需一步，快速开始

用微信登录

扫一扫，用微信登录

天下网吧论坛»网吧论坛 › 天下码农 › 前端开发 › 前端开发必备的一些短小JS工具类方法，前端常用正则验证 ...
返回列表 发新帖
查看: 3021|回复: 0
收起左侧

[发布源码] 前端开发必备的一些短小JS工具类方法，前端常用正则验证函数

[复制链接]
微信小程序
发表于 2020-11-19 10:48:16 | 显示全部楼层 |阅读模式 发布于:福建省福州市 电信
验证不能包含字母
  1. /**
  2. * @param { string } value
  3. */
  4. export const isNoWord = value => /^[^A-Za-z]*$/g.test(value);
复制代码

验证中文和数字
  1. /**
  2. * @param { string } value
  3. */
  4. export const isCHNAndEN = value => /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/g.test(value);
复制代码

验证邮政编码(中国)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isPostcode = value => /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/g.test(value);
复制代码

验证微信号，6至20位，以字母开头，字母，数字，减号，下划线
  1. /**
  2. * @param { string } value
  3. */
  4. export const isWeChatNum = value => /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/g.test(value);
复制代码

  验证16进制颜色
  1. /**
  2. * @param { string } value
  3. */
  4. export const isColor16 = value => /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/g.test(value);
复制代码

验证火车车次
  1. /**
  2. * @param { string } value
  3. */
  4. export const isTrainNum = value => /^[GCDZTSPKXLY1-9]\d{1,4}$/g.test(value);
复制代码

验证手机机身码(IMEI)
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isIMEI = value => /^\d{15,17}$/g.test(value);
复制代码

验证必须带端口号的网址(或ip)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isHttpAndPort = value => /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/g.test(value);
复制代码

  验证网址(支持端口和"?+参数"和"#+参数)
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isRightWebsite = value => /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/g.test(value);
复制代码

验证统一社会信用代码
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isCreditCode = value => /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/g.test(value);
复制代码

验证迅雷链接
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isThunderLink = value => /^thunderx?:\/\/[a-zA-Z\d]+=$/g.test(value);
复制代码

验证ed2k链接(宽松匹配)
  1. /**
  2. *  @param { string } value
  3. */
  4. export const ised2k = value => /^ed2k:\/\/\|file\|.+\|\/$/g.test(value);
复制代码

验证磁力链接(宽松匹配)
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isMagnet = value => /^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/g.test(value);
复制代码

验证子网掩码
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isSubnetMask = value => /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/g.test(value);
复制代码

验证linux"文件夹"路径
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isLinuxFolderPath = value => /^(\/[^/]+)+\/?$/g.test(value);
复制代码

验证linux"文件"路径
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isLinuxFilePath = value => /^(\/[^/]+)+$/g.test(value);
复制代码

验证window"文件夹"路径
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isWindowsFolderPath = value => /^[a-zA-Z]:\\(?:\w+\\?)*$/g.test(value);
复制代码

验证window下"文件"路径
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isWindowsFilePath = value => /^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/g.test(value);
复制代码

验证股票代码(A股)
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isAShare = value => /^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/g.test(value);
复制代码

验证版本号格式必须为X.Y.Z
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isVersion = value => /^\d+(?:\.\d+){2}$/g.test(value);
复制代码

验证视频链接地址（视频格式可按需增删）
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isVideoUrl = value => /^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i.test(value);
复制代码

验证图片链接地址（图片格式可按需增删）
  1. /**
  2. *  @param { string } value
  3. */
  4. export const isImageUrl = value => /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(value);
复制代码

验证银行卡号（10到30位, 覆盖对公/私账户, 参考微信支付）
  1. /**
  2. * @param { string } value
  3. */
  4. export const isAccountNumber = value => /^[1-9]\d{9,29}$/g.test(value);
复制代码

验证中文姓名
  1. /**
  2. * @param { string } value
  3. */
  4. export const isChineseName = value => /^(?:[\u4e00-\u9fa5·]{2,16})$/g.test(value);
复制代码

验证英文姓名
  1. /**
  2. * @param { string } value
  3. */
  4. export const isEnglishName = value => /(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/g.test(value);
复制代码

验证车牌号(新能源)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isLicensePlateNumberNER = value => /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/g.test(value);
复制代码

验证车牌号(非新能源)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isLicensePlateNumberNNER = value => /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/g.test(value);
复制代码

验证车牌号(新能源+非新能源)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isLicensePlateNumber = value => /^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/g.test(value);
复制代码

验证手机号中国(严谨), 根据工信部2019年最新公布的手机号段
  1. /**
  2. * @param { string } value
  3. */
  4. export const isMPStrict = value => /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/g.test(value);
复制代码

验证手机号中国(宽松), 只要是13,14,15,16,17,18,19开头即可
  1. /**
  2. * @param { string } value
  3. */
  4. export const isMPRelaxed = value => /^(?:(?:\+|00)86)?1[3-9]\d{9}$/g.test(value);
复制代码

验证email(邮箱)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isEmail = value => /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g.test(value);
复制代码

验证座机电话(国内),如: 0341-86091234
  1. /**
  2. * @param { string } value
  3. */
  4. export const isLandlineTelephone = value => /\d{3}-\d{8}|\d{4}-\d{7}/g.test(value);
复制代码

验证身份证号(1代,15位数字)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isIDCardOld = value => /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/g.test(value);
复制代码

验证身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X
  1. /**
  2. * @param { string } value
  3. */
  4. export const isIDCardNew = value => /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}[\dXx]$/g.test(value);
复制代码

验证身份证号, 支持1/2代(15位/18位数字)
  1. /**
  2. * @param { string } value
  3. */
  4. export const isIDCard = value => /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/g.test(value);
复制代码

验证护照（包含香港、澳门）
  1. /**
  2. * @param { string } value
  3. */
  4. export const isPassport = value => /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/g.test(value);
复制代码

验证帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合
  1. /**
  2. * @param { string } value
  3. */
  4. export const isWebAccount = value => /^[a-zA-Z]\w{4,15}$/g.test(value);
复制代码

验证中文/汉字
  1. /**
  2. * @param { string } value
  3. */
  4. export const isChineseCharacter = value => /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/g.test(value);
复制代码

验证小数
  1. /**
  2. * @param { string } value
  3. */
  4. export const isDecimal = value => /^\d+\.\d+$/g.test(value);
复制代码

验证数字
  1. /**
  2. * @param { string } value
  3. */
  4. export const isNumber = value => /^\d{1,}$/g.test(value);
复制代码

验证qq号格式
  1. /**
  2. * @param { string } value
  3. */
  4. export const isQQNum = value => /^[1-9][0-9]{4,10}$/g.test(value);
复制代码

验证数字和字母组成
  1. /**
  2. * @param { string } value
  3. */
  4. export const isNumAndStr = value => /^[A-Za-z0-9]+$/g.test(value);
复制代码

验证英文字母
  1. /**
  2. * @param { string } value
  3. */
  4. export const isEnglish = value => /^[a-zA-Z]+$/g.test(value);
复制代码

验证大写英文字母
  1. /**
  2. * @param { string } value
  3. */
  4. export const isCapital = value => /^[A-Z]+$/g.test(value);
复制代码

验证小写英文字母
  1. /**
  2. * @param { string } value
  3. */
  4. export const isLowercase = value => /^[a-z]+$/g.test(value);
复制代码

浏览器操作相关browser工具函数
返回当前url
  1. export const currentURL = () => window.location.href;
复制代码

获取url参数（第一种）
  1. /**
  2. * @param {*} name
  3. * @param {*} origin
  4. */
  5. export function getUrlParam(name, origin = null) {
  6.     let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  7.     let r = null;
  8.     if (origin == null) {
  9.         r = window.location.search.substr(1).match(reg);
  10.     } else {
  11.         r = origin.substr(1).match(reg);
  12.     }
  13.     if (r != null) return decodeURIComponent(r[2]);
  14.     return null;
  15. }
复制代码

获取url参数（第二种）
  1. /**
  2. * @param {*} name
  3. * @param {*} origin
  4. */
  5. export function getUrlParams(name, origin = null) {
  6.     let url = location.href;
  7.     let temp1 = url.split('?');
  8.     let pram = temp1[1];
  9.     let keyValue = pram.split('&');
  10.     let obj = {};
  11.     for (let i = 0; i < keyValue.length; i++) {
  12.         let item = keyValue[i].split('=');
  13.         let key = item[0];
  14.         let value = item[1];
  15.         obj[key] = value;
  16.     }
  17.     return obj[name];
  18. }
复制代码

修改url中的参数
  1. /**
  2. * @param { string } paramName
  3. * @param { string } replaceWith
  4. */
  5. export function replaceParamVal(paramName,replaceWith) {
  6.     var oUrl = location.href.toString();
  7.     var re=eval('/('+ paramName+'=)([^&]*)/gi');
  8.     location.href = oUrl.replace(re,paramName+'='+replaceWith);
  9.     return location.href;
  10. }
复制代码

删除url中指定的参数
  1. /**
  2. * @param { string } name
  3. */
  4. export function funcUrlDel(name){
  5.     var loca =location;
  6.     var baseUrl = loca.origin + loca.pathname + "?";
  7.     var query = loca.search.substr(1);
  8.     if (query.indexOf(name)>-1) {
  9.         var obj = {};
  10.         var arr = query.split("&");
  11.         for (var i = 0; i < arr.length; i++) {
  12.             arr[i] = arr[i].split("=");
  13.             obj[arr[i][0]] = arr[i][1];
  14.         }
  15.         delete obj[name];
  16.         var url = baseUrl + JSON.stringify(obj).replace(/["\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
  17.         return url
  18.     }
  19. }
复制代码

获取窗口可视范围的高度
  1. export function getClientHeight() {
  2.     let clientHeight = 0;
  3.     if (document.body.clientHeight && document.documentElement.clientHeight) {
  4.         clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  5.     }
  6.     else {
  7.         clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  8.     }
  9.     return clientHeight;
  10. }
复制代码

获取窗口可视范围宽度
  1. export function getPageViewWidth() {
  2.     let d = document,
  3.         a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  4.     return a.clientWidth;
  5. }
复制代码

获取窗口宽度
  1. export function getPageWidth() {
  2.     let g = document,
  3.         a = g.body,
  4.         f = g.documentElement,
  5.         d = g.compatMode == "BackCompat" ? a : g.documentElement;
  6.     return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
  7. }
复制代码

获取窗口尺寸
  1. export function getViewportOffset() {
  2.     if (window.innerWidth) {
  3.         return {
  4.             w: window.innerWidth,
  5.             h: window.innerHeight
  6.         }
  7.     } else {
  8.         // ie8及其以下
  9.         if (document.compatMode === "BackCompat") {
  10.             // 怪异模式
  11.             return {
  12.                 w: document.body.clientWidth,
  13.                 h: document.body.clientHeight
  14.             }
  15.         } else {
  16.             // 标准模式
  17.             return {
  18.                 w: document.documentElement.clientWidth,
  19.                 h: document.documentElement.clientHeight
  20.             }
  21.         }
  22.     }
  23. }
复制代码

获取滚动条距顶部高度
  1. export function getPageScrollTop() {
  2.     let a = document;
  3.     return a.documentElement.scrollTop || a.body.scrollTop;
  4. }
复制代码

获取滚动条距左边的高度
  1. function getPageScrollLeft() {
  2.     let a = document;
  3.     return a.documentElement.scrollLeft || a.body.scrollLeft;
  4. }
复制代码

开启全屏
  1. /**
  2. * @param {*} element
  3. */
  4. export function launchFullscreen(element) {
  5.     if (element.requestFullscreen) {
  6.         element.requestFullscreen()
  7.     } else if (element.mozRequestFullScreen) {
  8.         element.mozRequestFullScreen()
  9.     } else if (element.msRequestFullscreen) {
  10.         element.msRequestFullscreen()
  11.     } else if (element.webkitRequestFullscreen) {
  12.         element.webkitRequestFullScreen()
  13.     }
  14. }
复制代码

关闭全屏
  1. export function exitFullscreen() {
  2.     if (document.exitFullscreen) {
  3.         document.exitFullscreen()
  4.     } else if (document.msExitFullscreen) {
  5.         document.msExitFullscreen()
  6.     } else if (document.mozCancelFullScreen) {
  7.         document.mozCancelFullScreen()
  8.     } else if (document.webkitExitFullscreen) {
  9.         document.webkitExitFullscreen()
  10.     }
  11. }
复制代码

返回当前滚动条位置
  1. export const getScrollPosition = (el = window) => ({
  2.     x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  3.     y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
  4. });
复制代码

滚动到指定元素区域
  1. export const smoothScroll = element =>{
  2.     document.querySelector(element).scrollIntoView({
  3.         behavior: 'smooth'
  4.     });
  5. };
复制代码

平滑滚动到页面顶部
  1. export const scrollToTop = () => {
  2.     const c = document.documentElement.scrollTop || document.body.scrollTop;
  3.     if (c > 0) {
  4.         window.requestAnimationFrame(scrollToTop);
  5.         window.scrollTo(0, c - c / 8);
  6.     }
  7. };
复制代码

http跳转https
  1. export const httpsRedirect = () => {
  2.     if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
  3. };
复制代码

检查页面底部是否可见
  1. export const bottomVisible = () =>{
  2.     return document.documentElement.clientHeight + window.scrollY >=
  3.         (document.documentElement.scrollHeight || document.documentElement.clientHeight);
  4. };
复制代码

打开一个窗口
  1. /**
  2. * @param { string } url
  3. * @param { string } windowName
  4. * @param { number } width
  5. * @param { number } height
  6. */
  7. export function openWindow(url, windowName, width, height) {
  8.     var x = parseInt(screen.width / 2.0) - width / 2.0;
  9.     var y = parseInt(screen.height / 2.0) - height / 2.0;
  10.     var isMSIE = navigator.appName == "Microsoft Internet Explorer";
  11.     if (isMSIE) {
  12.         var p = "resizable=1,location=no,scrollbars=no,width=";
  13.         p = p + width;
  14.         p = p + ",height=";
  15.         p = p + height;
  16.         p = p + ",left=";
  17.         p = p + x;
  18.         p = p + ",top=";
  19.         p = p + y;
  20.         window.open(url, windowName, p);
  21.     } else {
  22.         var win = window.open(
  23.             url,
  24.             "ZyiisPopup",
  25.             "top=" +
  26.             y +
  27.             ",left=" +
  28.             x +
  29.             ",scrollbars=" +
  30.             scrollbars +
  31.             ",dialog=yes,modal=yes,width=" +
  32.             width +
  33.             ",height=" +
  34.             height +
  35.             ",resizable=no"
  36.         );
  37.         eval("try { win.resizeTo(width, height); } catch(e) { }");
  38.         win.focus();
  39.     }
  40. }
复制代码

自适应页面（rem）
  1. /**
  2. * @param { number } width
  3. */
  4. export function AutoResponse(width = 750) {
  5.     const target = document.documentElement;
  6.     target.clientWidth >= 600
  7.         ? (target.style.fontSize = "80px")
  8.         : (target.style.fontSize = target.clientWidth / width * 100 + "px");
  9. }
复制代码

日期工具date工具函数
主要为浏览器存储方面的工具函数，大部分搬运自大神火狼1
localStorage 存贮
  1. /**
  2. * 目前对象值如果是函数 、RegExp等特殊对象存贮会被忽略
  3. * @param { String } key  属性
  4. * @param { string } value 值
  5. */
  6. export const localStorageSet = (key, value) => {
  7.     if (typeof (value) === 'object') value = JSON.stringify(value);
  8.     localStorage.setItem(key, value)
  9. };
复制代码

localStorage 获取
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const localStorageGet = (key) => {
  5.     return localStorage.getItem(key)
  6. };
复制代码

localStorage 移除
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const localStorageRemove = (key) => {
  5.     localStorage.removeItem(key)
  6. };
复制代码

localStorage 存贮某一段时间失效
  1. /**
  2. * @param {String} key  属性
  3. * @param {*} value 存贮值
  4. * @param { number } expire 过期时间,毫秒数
  5. */
  6. export const localStorageSetExpire = (key, value, expire) => {
  7.     if (typeof (value) === 'object') value = JSON.stringify(value);
  8.     localStorage.setItem(key, value);
  9.     setTimeout(() => {
  10.         localStorage.removeItem(key)
  11.     }, expire)
  12. };
复制代码

sessionStorage 存贮
  1. /**
  2. * @param {String} key  属性
  3. * @param {*} value 值
  4. */
  5. export const sessionStorageSet = (key, value) => {
  6.     if (typeof (value) === 'object') value = JSON.stringify(value);
  7.     sessionStorage.setItem(key, value)
  8. };
复制代码

sessionStorage 获取
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const sessionStorageGet = (key) => {
  5.     return sessionStorage.getItem(key)
  6. };
复制代码

sessionStorage 删除
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const sessionStorageRemove = (key) => {
  5.     sessionStorage.removeItem(key)
  6. };
复制代码

sessionStorage 存贮某一段时间失效
  1. /**
  2. * @param {String} key  属性
  3. * @param {*} value 存贮值
  4. * @param {String} expire 过期时间,毫秒数
  5. */
  6. export const sessionStorageSetExpire = (key, value, expire) => {
  7.     if (typeof (value) === 'object') value = JSON.stringify(value);
  8.     sessionStorage.setItem(key, value);
  9.     setTimeout(() => {
  10.         sessionStorage.removeItem(key)
  11.     }, expire)
  12. };
复制代码

cookie 存贮
  1. /**
  2. * @param {String} key  属性
  3. * @param {*} value  值
  4. * @param { String } expire  过期时间,单位天
  5. */
  6. export const cookieSet = (key, value, expire) => {
  7.     const d = new Date();
  8.     d.setDate(d.getDate() + expire);
  9.     document.cookie = `${key}=${value};expires=${d.toUTCString()}`
  10. };
复制代码

cookie 获取
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const cookieGet = (key) => {
  5.     const cookieStr = unescape(document.cookie);
  6.     const arr = cookieStr.split('; ');
  7.     let cookieValue = '';
  8.     for (let i = 0; i < arr.length; i++) {
  9.         const temp = arr[i].split('=');
  10.         if (temp[0] === key) {
  11.             cookieValue = temp[1];
  12.             break
  13.         }
  14.     }
  15.     return cookieValue
  16. };
复制代码

cookie 删除
  1. /**
  2. * @param {String} key  属性
  3. */
  4. export const cookieRemove = (key) => {
  5.     document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`
  6. };
复制代码

更多的工具函数
这里包含了平时可能常用的工具函数，包含数字，字符串，数组和对象等等操作。
金钱格式化，三位加逗号
  1. /**
  2. *  @param { number } num
  3. */
  4. export const formatMoney = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
复制代码

截取字符串并加省略号
  1. export function subText(str, length) {
  2.     if (str.length === 0) {
  3.         return '';
  4.     }
  5.     if (str.length > length) {
  6.         return str.substr(0, length) + "...";
  7.     } else {
  8.         return str;
  9.     }
  10. }
复制代码

获取文件base64编码
  1. /**
  2. * @param file
  3. * @param format  指定文件格式
  4. * @param size  指定文件大小(字节)
  5. * @param formatMsg 格式错误提示
  6. * @param sizeMsg   大小超出限制提示
  7. * @returns {Promise<any>}
  8. */
  9. export function fileToBase64String(file, format = ['jpg', 'jpeg', 'png', 'gif'], size = 20 * 1024 * 1024, formatMsg = '文件格式不正确', sizeMsg = '文件大小超出限制') {
  10.     return new Promise((resolve, reject) => {
  11.         // 格式过滤
  12.         let suffix = file.type.split('/')[1].toLowerCase();
  13.         let inFormat = false;
  14.         for (let i = 0; i < format.length; i++) {
  15.             if (suffix === format[i]) {
  16.                 inFormat = true;
  17.                 break;
  18.             }
  19.         }
  20.         if (!inFormat) {
  21.             reject(formatMsg);
  22.         }
  23.         // 大小过滤
  24.         if (file.size > size) {
  25.             reject(sizeMsg);
  26.         }
  27.         // 转base64字符串
  28.         let fileReader = new FileReader();
  29.         fileReader.readAsDataURL(file);
  30.         fileReader.onload = () => {
  31.             let res = fileReader.result;
  32.             resolve({base64String: res, suffix: suffix});
  33.             reject('异常文件，请重新选择');
  34.         }
  35.     })
  36. }
复制代码

B转换到KB,MB,GB并保留两位小数
  1. /**
  2. * @param { number } fileSize
  3. */
  4. export function formatFileSize(fileSize) {
  5.     let temp;
  6.     if (fileSize < 1024) {
  7.         return fileSize + 'B';
  8.     } else if (fileSize < (1024 * 1024)) {
  9.         temp = fileSize / 1024;
  10.         temp = temp.toFixed(2);
  11.         return temp + 'KB';
  12.     } else if (fileSize < (1024 * 1024 * 1024)) {
  13.         temp = fileSize / (1024 * 1024);
  14.         temp = temp.toFixed(2);
  15.         return temp + 'MB';
  16.     } else {
  17.         temp = fileSize / (1024 * 1024 * 1024);
  18.         temp = temp.toFixed(2);
  19.         return temp + 'GB';
  20.     }
  21. }
复制代码

base64转file
  1. /**
  2. *  @param { base64 } base64
  3. *  @param { string } filename 转换后的文件名
  4. */
  5. export const base64ToFile = (base64, filename )=> {
  6.     let arr = base64.split(',');
  7.     let mime = arr[0].match(/:(.*?);/)[1];
  8.     let suffix = mime.split('/')[1] ;// 图片后缀
  9.     let bstr = atob(arr[1]);
  10.     let n = bstr.length;
  11.     let u8arr = new Uint8Array(n);
  12.     while (n--) {
  13.         u8arr[n] = bstr.charCodeAt(n)
  14.     }
  15.     return new File([u8arr], `${filename}.${suffix}`, { type: mime })
  16. };
复制代码
  1. /**
  2. *  @param { base64 } base64
  3. */
  4. export const base64ToBlob = base64 => {
  5.     let arr = base64.split(','),
  6.         mime = arr[0].match(/:(.*?);/)[1],
  7.         bstr = atob(arr[1]),
  8.         n = bstr.length,
  9.         u8arr = new Uint8Array(n);
  10.     while (n--) {
  11.         u8arr[n] = bstr.charCodeAt(n);
  12.     }
  13.     return new Blob([u8arr], { type: mime });
  14. };
复制代码

  blob转file
  1. /**
  2. *  @param { blob } blob
  3. *  @param { string } fileName
  4. */
  5. export const blobToFile = (blob, fileName) => {
  6.     blob.lastModifiedDate = new Date();
  7.     blob.name = fileName;
  8.     return blob;
  9. };
复制代码

file转base64
  1. /**
  2. * @param { * } file 图片文件
  3. */
  4. export const fileToBase64 = file => {
  5.     let reader = new FileReader();
  6.     reader.readAsDataURL(file);
  7.     reader.onload = function (e) {
  8.         return e.target.result
  9.     };
  10. };
复制代码

根据pid生成树形结构
  1. /**
  2. *  @param { object } items 后台获取的数据
  3. *  @param { * } id 数据中的id
  4. *  @param { * } link 生成树形结构的依据
  5. */
  6. export const createTree = (items, id = null, link = 'pid') =>{
  7.     items.filter(item => item[link] === id).map(item => ({ ...item, children: createTree(items, item.id) }));
  8. };
复制代码

查询数组中是否存在某个元素并返回元素第一次出现的下标
  1. /**
  2. * @param {*} item
  3. * @param { array } data
  4. */
  5. export function inArray(item, data) {
  6.     for (let i = 0; i < data.length; i++) {
  7.         if (item === data[i]) {
  8.             return i;
  9.         }
  10.     }
  11.     return -1;
  12. }
复制代码

Windows根据详细版本号判断当前系统名称
  1. /**
  2. * @param { string } osVersion
  3. */
  4. export function OutOsName(osVersion) {
  5.     if(!osVersion){
  6.         return
  7.     }
  8.     let str = osVersion.substr(0, 3);
  9.     if (str === "5.0") {
  10.         return "Win 2000"
  11.     } else if (str === "5.1") {
  12.         return "Win XP"
  13.     } else if (str === "5.2") {
  14.         return "Win XP64"
  15.     } else if (str === "6.0") {
  16.         return "Win Vista"
  17.     } else if (str === "6.1") {
  18.         return "Win 7"
  19.     } else if (str === "6.2") {
  20.         return "Win 8"
  21.     } else if (str === "6.3") {
  22.         return "Win 8.1"
  23.     } else if (str === "10.") {
  24.         return "Win 10"
  25.     } else {
  26.         return "Win"
  27.     }
  28. }
复制代码

  判断手机是Andoird还是IOS
  1. /**
  2. *  0: ios
  3. *  1: android
  4. *  2: 其它
  5. */
  6. export function getOSType() {
  7.     let u = navigator.userAgent, app = navigator.appVersion;
  8.     let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  9.     let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  10.     if (isIOS) {
  11.         return 0;
  12.     }
  13.     if (isAndroid) {
  14.         return 1;
  15.     }
  16.     return 2;
  17. }
复制代码

函数防抖
  1. /**
  2. * @param { function } func
  3. * @param { number } wait 延迟执行毫秒数
  4. * @param { boolean } immediate  true 表立即执行，false 表非立即执行
  5. */
  6. export function debounce(func,wait,immediate) {
  7.     let timeout;
  8.     return function () {
  9.         let context = this;
  10.         let args = arguments;
  11.         if (timeout) clearTimeout(timeout);
  12.         if (immediate) {
  13.             let callNow = !timeout;
  14.             timeout = setTimeout(() => {
  15.                 timeout = null;
  16.             }, wait);
  17.             if (callNow) func.apply(context, args)
  18.         }
  19.         else {
  20.             timeout = setTimeout(() => {
  21.                 func.apply(context, args)
  22.             }, wait);
  23.         }
  24.     }
  25. }
复制代码

函数节流
  1. /**
  2. * @param { function } func 函数
  3. * @param { number } wait 延迟执行毫秒数
  4. * @param { number } type 1 表时间戳版，2 表定时器版
  5. */
  6. export function throttle(func, wait ,type) {
  7.     let previous, timeout;
  8.     if(type===1){
  9.         previous = 0;
  10.     }else if(type===2){
  11.         timeout = null;
  12.     }
  13.     return function() {
  14.         let context = this;
  15.         let args = arguments;
  16.         if(type===1){
  17.             let now = Date.now();
  18.             if (now - previous > wait) {
  19.                 func.apply(context, args);
  20.                 previous = now;
  21.             }
  22.         }else if(type===2){
  23.             if (!timeout) {
  24.                 timeout = setTimeout(() => {
  25.                     timeout = null;
  26.                     func.apply(context, args)
  27.                 }, wait)
  28.             }
  29.         }
  30.     }
  31. }
复制代码

判断数据类型
  1. /**
  2. * @param {*} target
  3. */
  4. export function type(target) {
  5.     let ret = typeof(target);
  6.     let template = {
  7.         "[object Array]": "array",
  8.         "[object Object]":"object",
  9.         "[object Number]":"number - object",
  10.         "[object Boolean]":"boolean - object",
  11.         "[object String]":'string-object'
  12.     };
  13.     if(target === null) {
  14.         return 'null';
  15.     }else if(ret == "object"){
  16.         let str = Object.prototype.toString.call(target);
  17.         return template[str];
  18.     }else{
  19.         return ret;
  20.     }
  21. }
复制代码

生成指定范围随机数
  1. /**
  2. * @param { number } min
  3. * @param { number } max
  4. */
  5. export const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
复制代码

数组乱序
  1. /**
  2. * @param {array} arr
  3. */
  4. export function arrScrambling(arr) {
  5.     let array = arr;
  6.     let index = array.length;
  7.     while (index) {
  8.         index -= 1;
  9.         let randomIndex = Math.floor(Math.random() * index);
  10.         let middleware = array[index];
  11.         array[index] = array[randomIndex];
  12.         array[randomIndex] = middleware
  13.     }
  14.     return array
  15. }
复制代码

数组交集
  1. /**
  2. * @param { array} arr1
  3. * @param { array } arr2
  4. */
  5. export const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));
复制代码

数组中某元素出现的次数
  1. /**
  2. * @param { array } arr
  3. * @param {*} value
  4. */
  5. export function countOccurrences(arr, value) {
  6.     return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
  7. }
复制代码

加法函数（精度丢失问题）
  1. /**
  2. * @param { number } arg1
  3. * @param { number } arg2
  4. */
  5. export function add(arg1, arg2) {
  6.     let r1, r2, m;
  7.     try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
  8.     try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
  9.     m = Math.pow(10, Math.max(r1, r2));
  10.     return (arg1 * m + arg2 * m) / m
  11. }
复制代码

减法函数（精度丢失问题）
  1. /**
  2. * @param { number } arg1
  3. * @param { number } arg2
  4. */
  5. export function sub(arg1, arg2) {
  6.     let r1, r2, m, n;
  7.     try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
  8.     try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
  9.     m = Math.pow(10, Math.max(r1, r2));
  10.     n = (r1 >= r2) ? r1 : r2;
  11.     return Number(((arg1 * m - arg2 * m) / m).toFixed(n));
  12. }
复制代码

除法函数（精度丢失问题）
  1. /**
  2. * @param { number } num1
  3. * @param { number } num2
  4. */
  5. export function division(num1,num2){
  6.     let t1,t2,r1,r2;
  7.     try{
  8.         t1 = num1.toString().split('.')[1].length;
  9.     }catch(e){
  10.         t1 = 0;
  11.     }
  12.     try{
  13.         t2=num2.toString().split(".")[1].length;
  14.     }catch(e){
  15.         t2=0;
  16.     }
  17.     r1=Number(num1.toString().replace(".",""));
  18.     r2=Number(num2.toString().replace(".",""));
  19.     return (r1/r2)*Math.pow(10,t2-t1);
  20. }
复制代码

乘法函数（精度丢失问题）
  1. /**
  2. * @param { number } num1
  3. * @param { number } num2
  4. */
  5. export function mcl(num1,num2){
  6.     let m=0,s1=num1.toString(),s2=num2.toString();
  7.     try{m+=s1.split(".")[1].length}catch(e){}
  8.     try{m+=s2.split(".")[1].length}catch(e){}
  9.     return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
  10. }
复制代码

递归优化（尾递归）
  1. /**
  2. * @param { function } f
  3. */
  4. export function tco(f) {
  5.     let value;
  6.     let active = false;
  7.     let accumulated = [];
  8.     return function accumulator() {
  9.         accumulated.push(arguments);
  10.         if (!active) {
  11.             active = true;
  12.             while (accumulated.length) {
  13.                 value = f.apply(this, accumulated.shift());
  14.             }
  15.             active = false;
  16.             return value;
  17.         }
  18.     };
  19. }
复制代码

生成随机整数
  1. export function randomNumInteger(min, max) {
  2.     switch (arguments.length) {
  3.         case 1:
  4.             return parseInt(Math.random() * min + 1, 10);
  5.         case 2:
  6.             return parseInt(Math.random() * (max - min + 1) + min, 10);
  7.         default:
  8.             return 0
  9.     }
  10. }
复制代码

去除空格
  1. /**
  2. * @param { string } str 待处理字符串
  3. * @param  { number } type 去除空格类型 1-所有空格  2-前后空格  3-前空格 4-后空格 默认为1
  4. */
  5. export function trim(str, type = 1) {
  6.     if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return;
  7.     switch (type) {
  8.         case 1:
  9.             return str.replace(/\s/g, "");
  10.         case 2:
  11.             return str.replace(/(^\s)|(\s*$)/g, "");
  12.         case 3:
  13.             return str.replace(/(^\s)/g, "");
  14.         case 4:
  15.             return str.replace(/(\s$)/g, "");
  16.         default:
  17.             return str;
  18.     }
  19. }
复制代码

大小写转换
  1. /**
  2. * @param { string } str 待转换的字符串
  3. * @param { number } type 1-全大写 2-全小写 3-首字母大写 其他-不转换
  4. */
  5. export function turnCase(str, type) {
  6.     switch (type) {
  7.         case 1:
  8.             return str.toUpperCase();
  9.         case 2:
  10.             return str.toLowerCase();
  11.         case 3:
  12.             return str[0].toUpperCase() + str.substr(1).toLowerCase();
  13.         default:
  14.             return str;
  15.     }
  16. }
复制代码

随机16进制颜色 hexColor
  1. /**
  2. * 方法一
  3. */
  4. export function hexColor() {
  5.     let str = '#';
  6.     let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
  7.     for (let i = 0; i < 6; i++) {
  8.         let index = Number.parseInt((Math.random() * 16).toString());
  9.         str += arr[index]
  10.     }
  11.     return str;
  12. }
复制代码

随机16进制颜色 randomHexColorCode
  1. /**
  2. * 方法二
  3. */
  4. export const randomHexColorCode = () => {
  5.     let n = (Math.random() * 0xfffff * 1000000).toString(16);
  6.     return '#' + n.slice(0, 6);
  7. };
复制代码

转义html(防XSS攻击)
  1. /**
  2. */
  3. export const escapeHTML = str =>{
  4.     str.replace(
  5.         /[&<>'"]/g,
  6.         tag =>
  7.             ({
  8.                 '&': '&',
  9.                 '<': '<',
  10.                 '>': '>',
  11.                 "'": ''',
  12.                 '"': '"'
  13.             }[tag] || tag)
  14.     );
  15. };
复制代码

检测移动/PC设备
  1. export const detectDeviceType = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; };
复制代码

隐藏所有指定标签
  1. /**
  2. * 例: hide(document.querySelectorAll('img'))
  3. */
  4. export const hideTag = (...el) => [...el].forEach(e => (e.style.display = 'none'));
复制代码

返回指定元素的生效样式
  1. /**
  2. * @param { element} el  元素节点
  3. * @param { string } ruleName  指定元素的名称
  4. */
  5. export const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
复制代码

检查是否包含子元素
  1. /**
  2. * @param { element } parent
  3. * @param { element } child
  4. * 例：elementContains(document.querySelector('head'), document.querySelector('title')); // true
  5. */
  6. export const elementContains = (parent, child) => parent !== child && parent.contains(child);
复制代码

数字超过规定大小加上加号“+”，如数字超过99显示99+
  1. /**
  2. * @param { number } val 输入的数字
  3. * @param { number } maxNum 数字规定界限
  4. */
  5. export const outOfNum = (val, maxNum) =>{
  6.     val = val ? val-0 :0;
  7.     if (val > maxNum ) {
  8.         return `${maxNum}+`
  9.     }else{
  10.         return val;
  11.     }
  12. };
复制代码

参考
https://mp.weixin.qq.com/s/WMS7Kn5HS_FRVgZ8rAIpIA
https://github.com/any86/any-rule
https://juejin.im/post/5cc7afdde51d456e671c7e48
https://juejin.im/post/5da1a04ae51d45783d6122bf
https://juejin.im/post/5deb2cdf518825122671b637
https://juejin.im/post/5de5be53f265da05c33fcbb4
前端, 前端开发, 开发, 必备, 一些

相关帖子

赶紧来设置你的签名->玩转天下网吧论坛签名
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册账号   扫一扫，用微信登录

本版积分规则

下载天下网吧手机APP,直接一键登录
您尚未登录，请登陆后浏览更精彩内容！
 注册账号
找回密码

手机版|纯文字版|联系我们|免责声明|网吧论坛 ( __ICP号__ )

GMT+8, 2024-4-20 05:42 , Processed in 1.372765 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表