Front-end essential technology: JS package commonly used 60 methods

1. Email

export const isEmail = (s) => {

Return / ^ ([a zA - Z0 - _ - 9]) + @ ([a zA - Z0 - _ - 9]) + ((. [a zA - Z0 - _ - 9] {2, 3})} {1, 2) $/. The test (s)Copy the code

}

2. Mobile phone number

export const isMobile = (s) => {

return /^1[0-9]{10}$/.test(s)
Copy the code

}

3. Phone number

export const isPhone = (s) => {

The return / ^ ([0-9] {3, 4} -)? [0-9] {7, 8} $/. The test (s)Copy the code

}

4. Check whether the URL is available

export const isURL = (s) => {

return /^http[s]? :\/\/.*/.test(s)Copy the code

}

5. Check whether it is a string

export const isString = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'String'
Copy the code

}

6. Determine whether to use a number

export const isNumber = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
Copy the code

}

7. If a Boolean

export const isBoolean = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
Copy the code

}

8. Function

export const isFunction = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
Copy the code

}

9. Check whether the value is null

export const isNull = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
Copy the code

}

10. Is undefined

export const isUndefined = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
Copy the code

}

export const isObj = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
Copy the code

}

12. Array or not

export const isArray = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
Copy the code

}

13. Time

export const isDate = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
Copy the code

}

14. Whether is regular

export const isRegExp = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
Copy the code

}

15. Check whether the object is incorrect

export const isError = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Error'
Copy the code

}

16. Is it a Symbol function

export const isSymbol = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
Copy the code

}

17. Whether or not you Promise something

export const isPromise = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
Copy the code

}

18. Determine whether to Set an object

export const isSet = (o) => {

return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
Copy the code

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

19. Is it a wechat browser

export const isWeiXin = () => {

return ua.match(/microMessenger/i) == 'micromessenger'
Copy the code

}

export const isDeviceMobile = () => {

return /android|webos|iphone|ipod|balckberry/i.test(ua)
Copy the code

}

21. Is it a QQ browser

export const isQQBrowser = () => {

return !! ua.match(/mqqbrowser|qzone|qqbrowser|qbwebviewtype/i)Copy the code

}

22. Is it a reptile

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)Copy the code

}

23. If the ios

export const isIos = () => {

var u = navigator.userAgent; If (u.i ndexOf (' Android ') > 1 | | u.i ndexOf (' Linux ') > 1) {/ / Android phone return false} else if (u.i ndexOf (' iPhone ') > 1) Else if (u.ndexof ('iPad') > -1) {//iPad return false} else if (u.ndexof ('Windows Phone') > -1) {//iPad return false} else if (u.ndexof ('Windows Phone') > -1) Return false} else {return false}Copy the code

}

24. Check whether it is a 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;
Copy the code

}

25. Remove HTML tags

export const removeHtmltag = (str) => {

return str.replace(/<[^>]+>/g, '')
Copy the code

}

26. Obtain URL parameters

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];Copy the code

}

Dynamically introduce 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);
Copy the code

}

28. Download it according to the 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;Copy the code

}

29. Whether el contains a class

export const hasClass = (el, className) => {

let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
Copy the code

}

export const addClass = (el, className) => {

if (hasClass(el, className)) {
    return
}
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
Copy the code

}

31. El removes a 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, ' ')Copy the code

}

32. Get the scroll coordinates

export const getScrollPosition = (el = window) => ({

x: el.pageXOffset ! == undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset ! == undefined ? el.pageYOffset : el.scrollTopCopy the code

});

33. Scroll to the top

export const scrollToTop = () => {

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

}

34. Is el in viewport range

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;Copy the code

}

35. Shuffle algorithm is random

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;
Copy the code

}

36. Hijacking sticky boards

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);
Copy the code

}

37. Determine the type set

export const checkStr = (str, type) => {

Switch (type) {return case 'phone: / / phone number / ^ 1 [3 4 5 6 7 | | | | | | 8, 9] [0-9] {9} $/. The test (STR); Case 'tel: / / machine return / ^ (0 \ d {2, 3} - \ d {7, 8}) (\ d {1, 4})? $/.test(str); Case 'card: / / id return/(^ \ d {15} $) | | (^ \ d {and} $) (^ \ d {and} (\ d | | X) X $) /. The test (STR); Return /^[a-za-z]\w{5,17}$/. Test (STR) case 'postal': // the password must start with a letter and contain only letters, digits, and underscores. Return /[1-9]\d{5}(? ! \d)/.test(str); Case 'QQ' : / / QQ number return / ^ (1-9] [0-9] {4, 9} $/. The test (STR); Case 'email: / / email return / ^ [-] \ w + \. ([-] \ w +) * @ [-] \ w + \. ([-] \ w +) + $/. The test (STR); Case 'money': // amount (decimal place 2) return /^\d*(? : \ \ d {0, 2})? $/.test(str); Return case 'URL: / / URL/FTP | | HTTPS (HTTP) : / / / / / \ \ w - _ + (\. \ [\ w - _] +) + ([\ w \ \., @? ^ = % & : / ~ \ + #] * [\ w \ \ @? - ^ = % & / ~ \ + #])? /.test(str) case 'IP': //IP return /((? : (? :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/time/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); Return case 'English' : / / English / ^ [a zA - Z] + $/. The test (STR); Case: 'Chinese'/return/Chinese / ^ [\ \ \ u4E00 - \ \ \ u9FA5] + $/. The test (STR); Case 'lower': // return /^[a-z]+$/. Test (STR); Case 'upper': // return /^[a-z]+$/. Test (STR); Case 'HTML' : / / HTML tags return / < (" ^ "] * '|' [^ '] * '| [^' ">]) * > /. The test (STR); default: return true; }Copy the code

}

Strict verification of id cards

export const isCardID = (sId) => {

if (! 15} / (^ \ d {$) | (^ \ d {and} (\ d | | X) X $) /. The test (sId)) {the console. The log (' id you input length or format error) return false} / / var id city aCity = {11: 12: "Beijing", "tianjin", 13: "hebei", 14: "shanxi", 15: "Inner Mongolia", 21: "liaoning province", the 22: "jilin", 23: "heilongjiang", 31: "Shanghai", 32: "jiangsu", 33: "zhejiang", 34: 35: "anhui province", "fujian", 36: "jiangxi", 37: "41: shandong", "henan", 42: "hubei", 43: "hunan", 44: "guangdong", 45: "guangxi", 46: "hainan", 50: "chongqing", 51: "sichuan", 52: 53: "guizhou", "yunnan", 54: "Tibet", 61: "shaanxi", 62, "gansu province," 63: "qinghai", 64: "the ningxia", 65: "xinjiang", 71: "Taiwan", 81: "Hong Kong", 82, "macau", 91: "foreign"}; if (! ACity [parseInt(sid.substr (0, 2))]) {console.log(' your id is invalid ') return false} 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"), d = new Date(sBirthday) if (sBirthday ! = (d.g etFullYear () + "/" + (d.g etMonth () + 1) + "/" + d.g etDate ())) {the console. The log (' id card on the date of birth of illegal) return false} / / Weights = 0, weights = 2, 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(' your id number is invalid ') return false} return trueCopy the code

}

39. Random number range

export const random = (min, max) => {

if (arguments.length === 2) {
    return Math.floor(min + Math.random() * ((max + 1) - min))
} else {
    return null;
}
Copy the code

}

40. Translate Arabic numerals into Uppercase Chinese numerals

export const numberToChinese = (num) => {

Var AA = new Array (" zero ", "a", "2", "three", "four", "five", "six", "seven", "eight" and "nine", "ten"); Var BB = new Array (" ", "ten", "best", "$"," wan ", "$"," point ", ""); 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) // add the decimal part (if there is a decimal part) {re += BB[6]; for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)]; } if (c = 0, 0, 0, 0); If (re. Match (a / / ^) && re. The length = = 3) re = re. Replace (" a ", ""); return re;Copy the code

}

41. Convert numbers to uppercase amounts

export const changeToChinese = (Num) => {

If (typeof Num == "number") {Num = new String(Num); }; Num = num.replace (/,/g, "") // replace ", "in tomoney() Num = num.replace (/ /g, "") // Replace the space in tomoney() Num = num.replace (/￥/g, "") // replace the possible ￥character if (isNaN(Num)) {// verify that the input character is numeric //alert(" please check the lowercase amount is correct "); return ""; }; Var part = String(Num).split("."); var newchar = ""; For (var I = part[0]. Length - 1; i >= 0; i--) { if (part[0].length > 10) { return ""; } var perchar = part[0].charat (I); Switch (perchar) {case "0": tmpNewchar = "0" + tmpnewchar; break; Case "1": tmpNewchar = "1" + tmpnewchar; break; Case "2": tmpnewchar = "2" + tmpnewchar; break; Case "3": tmpNewchar = "3" + tmpnewchar; break; Case "4": tmpnewchar = "4" + tmpnewchar; break; Case "5": tmpNewchar = "5" + tmpnewchar; break; Case "6": tmpNewchar = "case" + tmpnewchar; break; Elseif "7": tmpNewchar = "SEVEN" + tmpnewchar; break; Case "8": tmpNewchar = "EIGHT" + tmpnewchar; break; Case "9": tmpNewchar = "nine" + tmpnewchar; break; } switch (part[0].length -i - 1) {case 0: tmpNewchar = tmpNewchar + ""; break; case 1: if (perchar ! = 0) tmpnewchar = tmpnewchar; break; case 2: if (perchar ! = 0) tmpnewchar = tmpnewchar + "; break; case 3: if (perchar ! = 0) tmpnewchar = tmpnewchar + "only "; break; Case 4: tmpnewchar = tmpnewchar + ""; break; case 5: if (perchar ! = 0) tmpnewchar = tmpnewchar; break; case 6: if (perchar ! = 0) tmpnewchar = tmpnewchar + "; break; case 7: if (perchar ! = 0) tmpnewchar = tmpnewchar + "only "; break; Case 8: tmpnewchar = tmpnewchar + ""; break; Case 9: tmpnewchar = tmpnewchar + "ten "; break; } var newchar = tmpnewchar + newchar; } if (num.indexof (".")! If (part[1].length > 2) {// alert(" if (part[1].length > 2) "); part[1] = part[1].substr(0, 2) } for (i = 0; i < part[1].length; I ++) {tmpNewchar = "perchar = part[1]. CharAt (I) switch (perchar) {case "0": tmpNewchar =" zero "+ tmpNewchar; break; Case "1": tmpNewchar = "1" + tmpnewchar; break; Case "2": tmpnewchar = "2" + tmpnewchar; break; Case "3": tmpNewchar = "3" + tmpnewchar; break; Case "4": tmpnewchar = "4" + tmpnewchar; break; Case "5": tmpNewchar = "5" + tmpnewchar; break; Case "6": tmpNewchar = "case" + tmpnewchar; break; Elseif "7": tmpNewchar = "SEVEN" + tmpnewchar; break; Case "8": tmpNewchar = "EIGHT" + tmpnewchar; break; Case "9": tmpNewchar = "nine" + tmpnewchar; break; } if (I == 0) tmpNewchar = tmpnewchar; If (I == 1) tmpNewchar = tmpnewchar; newchar = newchar + tmpnewchar; While (newchar. Search (" 0 ")! = -1) newchar = newchar. Replace (" 0 ", "0 "); Replace (" 0 billion ", "billion "); newchar = newchar. Replace (" 0 billion "," billion "); Newchar = newchar. Replace (" hundreds of millions ", "hundreds of millions "); Newchar = newchar. Replace (" zero million ", "ten thousand "); Replace (" zero ", "element "); newchar = newchar. Replace (" zero "," element "); Replace (" 0 ", ""); newchar = newchar. Replace (" 0 ", ""); Replace (" 0 分", ""); newchar = newchar. Replace (" 0 分", ""); If (newchar. CharAt (newchar. Length-1) == "yuan ") {newchar = newchar +" whole "} return newchar;Copy the code

}

42. Check if an element is in an array

export const contains = (arr, val) => {

return arr.indexOf(val) ! = 1? true : false;Copy the code

}

43. Array sort {type} 1: from smallest to largest 2: from largest to smallest 3: random

export const sort = (arr, type = 1) => {

return arr.sort((a, b) => { switch (type) { case 1: return a - b; case 2: return b - a; Case 3: return math.random () -0.5; default: return arr; }})Copy the code

}

44. To weight

export const unique = (arr) => {

if (Array.hasOwnProperty('from')) { return Array.from(new Set(arr)); } else { var n = {}, r = []; for (var i = 0; i < arr.length; i++) { if (! n[arr[i]]) { n[arr[i]] = true; r.push(arr[i]); } } return r; }Copy the code

}

Find the union of two sets

export const union = (a, b) => {

var newArr = a.concat(b);
return this.unique(newArr);
Copy the code

}

Find the intersection of two sets

export const intersect = (a, b) => {

var _this = this;
a = this.unique(a);
return this.map(a, function (o) {
    return _this.contains(b, o) ? o : null;
});
Copy the code

}

47. Delete one element

export const remove = (arr, ele) => {

var index = arr.indexOf(ele);
if (index > -1) {
    arr.splice(index, 1);
}
return arr;
Copy the code

}

48. Convert class arrays to arrays

export const formArray = (ary) => {

var arr = [];
if (Array.isArray(ary)) {
    arr = ary;
} else {
    arr = Array.prototype.slice.call(ary);
};
return arr;
Copy the code

}

The maximum value of 49.

export const max = (arr) => {

return Math.max.apply(null, arr);
Copy the code

}

50. The minimum value

export const min = (arr) => {

return Math.min.apply(null, arr);
Copy the code

}

51. The sum

export const sum = (arr) => {

return arr.reduce((pre, cur) => {
    return pre + cur
})
Copy the code

}

The average 52.

export const average = (arr) => {

return this.sum(arr) / arr.length
Copy the code

}

53. Remove Spaces,type: 1- all Spaces 2- front and rear Spaces 3- front Spaces 4- back Spaces

export const trim = (str, type) => {

type = type || 1
switch (type) {
    case 1:
        return str.replace(/\s+/g, "");
    case 2:
        return str.replace(/(^\s*)|(\s*$)/g, "");
    case 3:
        return str.replace(/(^\s*)/g, "");
    case 4:
        return str.replace(/(\s*$)/g, "");
    default:
        return str;
}
Copy the code

}

54. Character conversion, type: 1: uppercase letters 2: lowercase letters 3: uppercase letters 4: all uppercase letters 5: all lowercase letters

export const changeCase = (str, type) => {

type = type || 4
switch (type) {
    case 1:
        return str.replace(/\b\w+\b/g, function (word) {
            return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();

        });
    case 2:
        return str.replace(/\b\w+\b/g, function (word) {
            return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
        });
    case 3:
        return str.split('').map(function (word) {
            if (/[a-z]/.test(word)) {
                return word.toUpperCase();
            } else {
                return word.toLowerCase()
            }
        }).join('')
    case 4:
        return str.toUpperCase();
    case 5:
        return str.toLowerCase();
    default:
        return str;
}
Copy the code

}

55. Detect password strength

export const checkPwd = (str) => {

var Lv = 0; if (str.length < 6) { return Lv } if (/[0-9]/.test(str)) { Lv++ } if (/[a-z]/.test(str)) { Lv++ } if (/[A-Z]/.test(str))  { Lv++ } if (/[\.|-|_]/.test(str)) { Lv++ } return Lv;Copy the code

}

56. Function throttle

export const debouncer = (fn, time, interval = 200) => {

if (time - (window.debounceTimestamp || 0) > interval) {
    fn && fn();
    window.debounceTimestamp = time;
}
Copy the code

}

57. Insert a new string into a string

export const insertStr = (soure, index, newStr) => {

var str = soure.slice(0, index) + newStr + soure.slice(index);
return str;
Copy the code

}

58. Determine whether two objects have the same key value

export const isObjectEqual = (a, b) => { var aProps = Object.getOwnPropertyNames(a); var bProps = Object.getOwnPropertyNames(b);

if (aProps.length ! == bProps.length) { return false; } for (var i = 0; i < aProps.length; i++) { var propName = aProps[i]; if (a[propName] ! == b[propName]) { return false; } } return true;Copy the code

}

59.hexadecimal color transfer RGBRGBA string

export const colorToRGB = (val, opa) => {

var pattern = /^(#?) [a-fA-F0-9]{6}$/; Var isOpa = typeof opa == 'number'; // Check whether the opacity is set if (! Pattern.test (val)) {// Return null character "" if the value does not match the rule; } var v = val.replace(/#/, ''); Var rgbArr = []; var rgbArr = []; var rgbStr = ''; for (var i = 0; i < 3; i++) { var item = v.substring(i * 2, i * 2 + 2); var num = parseInt(item, 16); rgbArr.push(num); } rgbStr = rgbArr.join(); rgbStr = 'rgb' + (isOpa ? 'a' : '') + '(' + rgbStr + (isOpa ? ',' + opa : '') + ')'; return rgbStr;Copy the code

}

60. Append URL parameters

export const appendQuery = (url, key, value) => {

var options = key; if (typeof options == 'string') { options = {}; options[key] = value; } options = $.param(options); if (url.includes('? ')) { url += '&' + options } else { url += '? ' + options } return url;Copy the code

}