有哪些JavaScript长尾工具函数可以高效解决常见编程问题？

本文共计2476个文字，预计阅读时间需要10分钟。

本文总结了JavaScript常用工具函数，供大家参考学习。以下是一些示例：

1. 为元素添加on方法： javascript Element.prototype.on=Element.prototype.addEventListener; NodeList.prototype.on=function(event, fn) { [...this].forEach(element=> element.on(event, fn)); };

2. 判断是否为空对象： javascript function isEmptyObject(obj) { return Object.keys(obj).length===0; }

3. 随机生成指定范围内的整数： javascript function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

4. 数组去重： javascript function unique(arr) { return [...new Set(arr)]; }

5. 数组转对象： javascript function arrayToObject(arr, key) { return arr.reduce((obj, item)=> { obj[item[key]]=item; return obj; }, {}); }

6. 对象转数组： javascript function objectToArray(obj) { return Object.keys(obj).map(key=> obj[key]); }

7. 深拷贝对象： javascript function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }

8. 格式化时间： javascript function formatTime(date) { const year=date.getFullYear(); const month=date.getMonth() + 1; const day=date.getDate(); const hour=date.getHours(); const minute=date.getMinutes(); const second=date.getSeconds(); return `${year}-${month}-${day} ${hour}:${minute}:${second}`; }

本文实例总结了JavaScript常用工具函数。分享给大家供大家参考，具体如下：

为元素添加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, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;"); // Don't escape special characters in the template. s += templateData[i]; } return s; } // 调用 var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

跨浏览器绑定事件

function addEventSamp(obj, evt, fn) { if (!oTarget) { return; } if (obj.addEventListener) { obj.addEventListener(evt, fn, false); } else if (obj.attachEvent) { obj.attachEvent("on" + evt, fn); } else { oTarget["on" + sEvtType] = fn; } }

加入收藏夹

function addFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sTitle); } catch (e) { try { window.sidebar.addPanel(sTitle, sURL, ""); } catch (e) { alert("加入收藏失败，请使用Ctrl+D进行添加"); } } }

提取页面代码中所有网址

var aa = document.documentElement.outerHTML .match( /(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(") == 0 ) { a = trim(a.replace(/w3cboy.com"); } else if (window.sidebar) { if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege( "UniversalXPConnect" ); } catch (e) { alert( "该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true" ); } } var prefs = Components.classes[ "@mozilla.org/preferences-service;1" ].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref("browser.startup.homepage", "w3cboy.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; }

全角转换为半角函数

function toCDB(str) { var result = ""; for (var i = 0; i < str.length; i++) { code = str.charCodeAt(i); if (code >= 65281 && code <= 65374) { result += String.fromCharCode(str.charCodeAt(i) - 65248); } else if (code == 12288) { result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32); } else { result += str.charAt(i); } } return result; }

半角转换为全角函数

function toDBC(str) { var result = ""; for (var i = 0; i < str.length; i++) { code = str.charCodeAt(i); if (code >= 33 && code <= 126) { result += String.fromCharCode(str.charCodeAt(i) + 65248); } else if (code == 32) { result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32); } else { result += str.charAt(i); } } return result; }

金额大写转换函数

function transform(tranvalue) { try { var i = 1; var dw2 = new Array("", "万", "亿"); //大单位 var dw1 = new Array("拾", "佰", "仟"); //小单位 var dw = new Array( "零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖" ); //整数部分用 //以下是小写转换成大写显示在合计大写的文本框中 //分离整数与小数 var source = splits(tranvalue); var num = source[0]; var dig = source[1]; //转换整数部分 var k1 = 0; //计小单位 var k2 = 0; //计大单位 var sum = 0; var str = ""; var len = source[0].length; //整数的长度 for (i = 1; i <= len; i++) { var n = source[0].charAt(len - i); //取得某个位数上的数字 var bn = 0; if (len - i - 1 >= 0) { bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字 } sum = sum + Number(n); if (sum != 0) { str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面 if (n == "0") sum = 0; } if (len - i - 1 >= 0) { //在数字范围内 if (k1 != 3) { //加小单位 if (bn != 0) { str = dw1[k1].concat(str); } k1++; } else { //不加小单位，加大单位 k1 = 0; var temp = str.charAt(0); if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位 str = str.substr(1, str.length - 1); str = dw2[k2].concat(str); sum = 0; } } if (k1 == 3) { //小单位到千则大单位进一 k2++; } } //转换小数部分 var strdig = ""; if (dig != "") { var n = dig.charAt(0); if (n != 0) { strdig += dw[Number(n)] + "角"; //加数字 } var n = dig.charAt(1); if (n != 0) { strdig += dw[Number(n)] + "分"; //加数字 } } str += "元" + strdig; } catch (e) { return "0元"; } return str; } //拆分整数与小数 function splits(tranvalue) { var value = new Array("", ""); temp = tranvalue.split("."); for (var i = 0; i < temp.length; i++) { value = temp; } return value; }

清除空格

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解码

function utf8_decode(str_data) { var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0; str_data += ""; while (i < str_data.length) { c1 = str_data.charCodeAt(i); if (c1 < 128) { tmp_arr[ac++] = String.fromCharCode(c1); i++; } else if (c1 > 191 && c1 < 224) { c2 = str_data.charCodeAt(i + 1); tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = str_data.charCodeAt(i + 1); c3 = str_data.charCodeAt(i + 2); tmp_arr[ac++] = String.fromCharCode( ((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63) ); i += 3; } } return tmp_arr.join(""); }

以下是Puxiao投稿推荐的几个函数，用作常见的输入值校验和替换操作，主要针对中国大陆地区的校验规则：

校验是否为一个数字，以及该数字小数点位数是否与参数floats一致

校验规则：

• 若参数floats有值，则校验该数字小数点后的位数。
• 若参数floats没有值，则仅仅校验是否为数字。

function isNum(value,floats=null){ let regexp = new RegExp(`^[1-9][0-9]*.[0-9]{${floats}}$|^0.[0-9]{${floats}}$`); return typeof value === 'number' && floats?regexp.test(String(value)):true; }

function anysicIntLength(minLength,maxLength){ let result_str = ''; if(minLength){ switch(maxLength){ case undefined: result_str = result_str.concat(`{${minLength-1}}`); break; case null: result_str = result_str.concat(`{${minLength-1},}`); break; default: result_str = result_str.concat(`{${minLength-1},${maxLength-1}}`); } }else{ result_str = result_str.concat('*'); } return result_str; }

校验是否为非零的正整数

function isInt(value,minLength=null,maxLength=undefined){ if(!isNum(value)) return false; let regexp = new RegExp(`^-?[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`); return regexp.test(value.toString()); }

校验是否为非零的正整数

function isPInt(value,minLength=null,maxLength=undefined) { if(!isNum(value)) return false; let regexp = new RegExp(`^[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`); return regexp.test(value.toString()); }

校验是否为非零的负整数

function isNInt(value,minLength=null,maxLength=undefined){ if(!isNum(value)) return false; let regexp = new RegExp(`^-[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`); return regexp.test(value.toString()); }

校验整数是否在取值范围内

校验规则：

• minInt为在取值范围中最小的整数
• maxInt为在取值范围中最大的整数

function checkIntRange(value,minInt,maxInt=9007199254740991){ return Boolean(isInt(value) && (Boolean(minInt!=undefined && minInt!=null)?value>=minInt:true) && (value<=maxInt)); }

校验是否为中国大陆手机号

function isTel(value) { return /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value.toString()); }

校验是否为中国大陆传真或固定电话号码

function isFax(str) { return /^([0-9]{3,4})?[0-9]{7,8}$|^([0-9]{3,4}-)?[0-9]{7,8}$/.test(str); }

校验是否为邮箱地址

function isEmail(str) { return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(str); }

校验是否为QQ号码

校验规则：

• 非0开头的5位-13位整数

function isQQ(value) { return /^[1-9][0-9]{4,12}$/.test(value.toString()); }

校验是否为网址

校验规则：

• 以、、ftp://、rtsp://、mms://开头、或者没有这些开头
• 可以没有www开头(或其他二级域名)，仅域名
• 网页地址中允许出现/%*?@&等其他允许的符号

function isURL(str) { return /^(tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。