前端常用60余种工具方法（上）

1.邮箱

export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

2.手机号码

export const isMobile = (s) => {return /^1[0-9]{10}$/.test(s)
}

3.电话号码

export const isPhone = (s) => {return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

4.是否url地址

export const isURL = (s) => {return /^http[s]?:\/\/.*/.test(s)
}

5.是否字符串

export const isString = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}

6.是否数字

export const isNumber = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}

7.是否boolean

export const isBoolean = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}

8.是否函数

export const isFunction = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}

9.是否为null

export const isNull = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}

10.是否undefined

export const isUndefined = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}

11.是否对象

export const isObj = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}

12.是否数组

export const isArray = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}

13.是否时间

export const isDate = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}

14.是否正则

export const isRegExp = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
}

15.是否错误对象

export const isError = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Error'
}

16.是否Symbol函数

export const isSymbol = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
}

17.是否Promise对象

export const isPromise = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
}

18.是否Set对象

export const isSet = (o) => {return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
}

export const ua = navigator.userAgent.toLowerCase();

19.是否是微信浏览器

export const isWeiXin = () => {return ua.match(/microMessenger/i) == 'micromessenger'
}

20.是否是移动端

export const isDeviceMobile = () => {return /android|webos|iphone|ipod|balckberry/i.test(ua)
}

21.是否是QQ浏览器

export const isQQBrowser = () => {return !!ua.match(/mqqbrowser|qzone|qqbrowser|qbwebviewtype/i)
}

22.是否是爬虫

export const isSpider = () => {return /adsbot|googlebot|bingbot|msnbot|yandexbot|baidubot|robot|careerbot|seznambot|bot|baiduspider|jikespider|symantecspider|scannerlwebcrawler|crawler|360spider|sosospider|sogou web sprider|sogou orion spider/.test(ua)
}

23.是否ios

export const isIos = () => {var u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {  //安卓手机return false} else if (u.indexOf('iPhone') > -1) {//苹果手机return true} else if (u.indexOf('iPad') > -1) {//iPadreturn false} else if (u.indexOf('Windows Phone') > -1) {//winphone手机return false} else {return false}
}

24.是否为PC端

export const isPC = () => {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}return flag;
}

25.去除html标签

export const removeHtmltag = (str) => {return str.replace(/<[^>]+>/g, '')
}

26.获取url参数

export const getQueryString = (name) => {const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');const search = window.location.search.split('?')[1] || '';const r = search.match(reg) || [];return r[2];
}

27.动态引入js

export const injectScript = (src) => {const s = document.createElement('script');s.type = 'text/javascript';s.async = true;s.src = src;const t = document.getElementsByTagName('script')[0];t.parentNode.insertBefore(s, t);
}

28.根据url地址下载

export const download = (url) => {var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;if (isChrome || isSafari) {var link = document.createElement('a');link.href = url;if (link.download !== undefined) {var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);link.download = fileName;}if (document.createEvent) {var e = document.createEvent('MouseEvents');e.initEvent('click', true, true);link.dispatchEvent(e);return true;}}if (url.indexOf('?') === -1) {url += '?download';}window.open(url, '_self');return true;
}

29.el是否包含某个class

export const hasClass = (el, className) => {let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')return reg.test(el.className)
}

30.el添加某个class

export const addClass = (el, className) => {if (hasClass(el, className)) {return}let newClass = el.className.split(' ')newClass.push(className)el.className = newClass.join(' ')
}

31.el去除某个class

export const removeClass = (el, className) => {if (!hasClass(el, className)) {return}let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')el.className = el.className.replace(reg, ' ')
}

32.获取滚动的坐标

export const getScrollPosition = (el = window) => ({x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

33.滚动到顶部

export const scrollToTop = () => {const c = document.documentElement.scrollTop || document.body.scrollTop;if (c > 0) {window.requestAnimationFrame(scrollToTop);window.scrollTo(0, c - c / 8);}
}

34.el是否在视口范围内

export const elementIsVisibleInViewport = (el, partiallyVisible = false) => {const { top, left, bottom, right } = el.getBoundingClientRect();const { innerHeight, innerWidth } = window;return partiallyVisible? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)): top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}

35.洗牌算法随机

export const shuffle = (arr) => {var result = [],random;while (arr.length > 0) {random = Math.floor(Math.random() * arr.length);result.push(arr[random])arr.splice(random, 1)}return result;
}

36.劫持粘贴板

export const copyTextToClipboard = (value) => {var textArea = document.createElement("textarea");textArea.style.background = 'transparent';textArea.value = value;document.body.appendChild(textArea);textArea.select();try {var successful = document.execCommand('copy');} catch (err) {console.log('Oops, unable to copy');}document.body.removeChild(textArea);
}

37.判断类型集合

export const checkStr = (str, type) => {switch (type) {case 'phone':   //手机号码return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);case 'tel':     //座机return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);case 'card':    //身份证return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);case 'pwd':     //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线return /^[a-zA-Z]\w{5,17}$/.test(str)case 'postal':  //邮政编码return /[1-9]\d{5}(?!\d)/.test(str);case 'QQ':      //QQ号return /^[1-9][0-9]{4,9}$/.test(str);case 'email':   //邮箱return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);case 'money':   //金额(小数点2位)return /^\d*(?:\.\d{0,2})?$/.test(str);case 'URL':     //网址return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)case 'IP':      //IPreturn /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);case 'date':    //日期时间return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)case 'number':  //数字return /^[0-9]$/.test(str);case 'english': //英文return /^[a-zA-Z]+$/.test(str);case 'chinese': //中文return /^[\\u4E00-\\u9FA5]+$/.test(str);case 'lower':   //小写return /^[a-z]+$/.test(str);case 'upper':   //大写return /^[A-Z]+$/.test(str);case 'HTML':    //HTML标记return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);default:return true;}
}

38.严格的身份证校验

export const isCardID = (sId) => {if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {console.log('你输入的身份证长度或格式错误')return false}//身份证城市var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };if (!aCity[parseInt(sId.substr(0, 2))]) {console.log('你的身份证地区非法')return false}// 出生日期验证var sBirthday = (sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"),d = new Date(sBirthday)if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {console.log('身份证上的出生日期非法')return false}// 身份证号码校验var sum = 0,weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],codes = "10X98765432"for (var i = 0; i < sId.length - 1; i++) {sum += sId[i] * weights[i];}var last = codes[sum % 11]; //计算出来的最后一位身份证号码if (sId[sId.length - 1] != last) {console.log('你输入的身份证号非法')return false}return true
}

39.随机数范围

export const random = (min, max) => {if (arguments.length === 2) {return Math.floor(min + Math.random() * ((max + 1) - min))} else {return null;}
}

40.将阿拉伯数字翻译成中文的大写数字

export const numberToChinese = (num) => {var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");var a = ("" + num).replace(/(^0*)/g, "").split("."),k = 0,re = "";for (var i = a[0].length - 1; i >= 0; i--) {switch (k) {case 0:re = BB[7] + re;break;case 4:if (!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$").test(a[0]))re = BB[4] + re;break;case 8:re = BB[5] + re;BB[7] = BB[5];k = 0;break;}if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)re = AA[0] + re;if (a[0].charAt(i) != 0)re = AA[a[0].charAt(i)] + BB[k % 4] + re;k++;}if (a.length > 1) // 加上小数部分(如果有小数部分){re += BB[6];for (var i = 0; i < a[1].length; i++)re += AA[a[1].charAt(i)];}if (re == '一十')re = "十";if (re.match(/^一/) && re.length == 3)re = re.replace("一", "");return re;
}

来源：思否作者：vipbic

前端常用60余种工具方法（下）

点击这里，了解更多精彩内容

前端常用60余种工具方法（上）相关推荐

前端常用60余种工具方法（下）
前端常用60余种工具方法(上) 41.将数字转换为大写金额 export const changeToChinese = (Num) => {//判断如果传递进来的不是字符的话转换为字符if ( ...
前端常用 60 余种工具方法
转载自前端大全作者:vipbic https://segmentfault.com/a/1190000022736837 邮箱 export const isEmail = (s) => { ...
【总结】前端常用60余种校验类工具方法
工欲善其事必先利其器,前端开发有时会处理一部分后台返回的数据或者根据数据判断做一些处理,这个时候就非常有必要将一些常用的工具类封装起来. 1.邮箱 export const isEmail = (s) ...
前端js校验常用的60余种工具方法
1.邮箱 export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2, ...
前端常用的几种加密方法
目前在前端开发中基本都会用到加密,最常见的就是登录密码的加密.接下来会为大家介绍几种加密方法. md5 加密 MD5 加密后的位数有两种:16 位与 32 位.默认使用32位. (16 位实际上是从 ...
vue中60余种工具类
1.邮箱 export const isEmail = (s) => {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2, ...
前端常用的 59 个工具类【持续更新】
#前端常用的 59 个工具类[持续更新] 前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 ...
支付宝升级商家积分等服务商家积分权益增至60余种
12月7日消息,据"支付宝开放平台"公众号发布的消息,为进一步帮助小微商家降本增效,支付宝开放平台持续投入,12月起,针对小微商家的新举措商家营销工具"赚钱红包" ...
ps抠图基础篇：最常用的四种抠图方法
ps抠图基础篇:最常用的四种抠图方法一.善用魔术棒法用魔法帮抠图是最直观明了的抠图方法,也是最基础的抠图方法,适用范围是图像和背景色差非常明显,背景颜色单一,图像边界清晰. 魔法棒抠图就是通过删除 ...

前端常用60余种工具方法（上）

1.邮箱

2.手机号码

3.电话号码

4.是否url地址

5.是否字符串

6.是否数字

7.是否boolean

8.是否函数

9.是否为null

10.是否undefined

11.是否对象

12.是否数组

13.是否时间

14.是否正则

15.是否错误对象

16.是否Symbol函数

17.是否Promise对象

18.是否Set对象

19.是否是微信浏览器

20.是否是移动端

21.是否是QQ浏览器

22.是否是爬虫

23.是否ios

24.是否为PC端

25.去除html标签

26.获取url参数

27.动态引入js

28.根据url地址下载

29.el是否包含某个class

30.el添加某个class

31.el去除某个class

32.获取滚动的坐标

33.滚动到顶部

34.el是否在视口范围内

35.洗牌算法随机

36.劫持粘贴板

37.判断类型集合

38.严格的身份证校验

39.随机数范围

40.将阿拉伯数字翻译成中文的大写数字

前端常用60余种工具方法（上）相关推荐

最新文章

热门文章