书到用时方恨少，一大波JS开发工具函数来了

最新推荐文章于 2025-12-24 01:14:44 发布

原创最新推荐文章于 2025-12-24 01:14:44 发布 · 491 阅读

CC 4.0 BY-SA版权

本文汇总了一系列JavaScript工具函数，涵盖正则校验、浏览器操作、日期处理及浏览器存储等方面，旨在提升开发效率，解决日常开发中遇到的各类需求。

在我们日常开发的时候，可能会遇到各种各样的需求，但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少，下面的这些JavaScript的工具函数可能就会派上大用场了，我们可以进行复用，提高我们的工作效率。
我把下面的方法都大致分了个类放在了我的GitHub上。大家可以clone下来直接使用，也可以在需要用到时在里面去查找，善用ctrl+F。
这个仓库也会持更新的，如果里面没有，但是需要用到的工具函数，大家也可以在issues提出来，说不定就帮到了别人哟~
正则校验check工具函数
这里的正则表达式主要参考了any-rule。
验证不能包含字母
/**

@param { string } value
/
export const isNoWord = value => /^[A-Za-z]$/g.test(value);
复制代码验证中文和数字
/**
@param { string } value
/
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);
复制代码验证邮政编码(中国)
/*
@param { string } value
/
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位，以字母开头，字母，数字，减号，下划线
/*
@param { string } value
/
export const isWeChatNum = value => /¹[-_a-zA-Z0-9]{5,19}$/g.test(value);
复制代码验证16进制颜色
/*
@param { string } value
/
export const isColor16 = value => /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/g.test(value);
复制代码验证火车车次
/*
@param { string } value
/
export const isTrainNum = value => /²\d{1,4}$/g.test(value);
复制代码验证手机机身码(IMEI)
/*
@param { string } value
/
export const isIMEI = value => /^\d{15,17}$/g.test(value);
复制代码验证必须带端口号的网址(或ip)
/*
@param { string } value
/
export const isHttpAndPort = value => /^((ht|f)tps?😕/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/g.test(value);
复制代码验证网址(支持端口和"?+参数"和"#+参数)
/*
@param { string } value
/
export const isRightWebsite = value => /^{(((ht|f)tps?)😕/)?[\w-]+(.[\w-]+)+([\w.,@?}=%&😕_{+#-]*[\w@?^=%&/}+#-])?$/g.test(value);
复制代码验证统一社会信用代码
/*
@param { string } value
/
export const isCreditCode = value => /³{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/g.test(value);
复制代码验证迅雷链接
/*
@param { string } value
/
export const isThunderLink = value => /^thunderx?😕/[a-zA-Z\d]+=$/g.test(value);
复制代码验证ed2k链接(宽松匹配)
/*
@param { string } value
/
export const ised2k = value => /^ed2k://|file|.+|/$/g.test(value);
复制代码验证磁力链接(宽松匹配)
/*
@param { string } value
/
export const isMagnet = value => /^magnet:?xt=urn:btih:[0-9a-fA-F]{40,}.$/g.test(value);
复制代码验证子网掩码
/**
@param { string } value
/
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"文件夹"路径
/*
@param { string } value
/
export const isLinuxFolderPath = value => /^(/[/]+)+/?$/g.test(value);
复制代码验证linux"文件"路径
/*
@param { string } value
/
export const isLinuxFilePath = value => /^(/[/]+)+$/g.test(value);
复制代码验证window"文件夹"路径
/*
@param { string } value
/
export const isWindowsFolderPath = value => /⁴:\(?:\w+\?)$/g.test(value);
复制代码验证window下"文件"路径
/**
@param { string } value
/
export const isWindowsFilePath = value => /⁵:$?:\w+$\w+.\w+$/g.test(value);
复制代码验证股票代码(A股)
/**
@param { string } value
/
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
/*
@param { string } value
/
export const isVersion = value => /^\d+(?:.\d+){2}$/g.test(value);
复制代码验证视频链接地址（视频格式可按需增删）
/*
@param { string } value
/
export const isVideoUrl = value => /^https?😕/(.+/)+.+(.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i.test(value);
复制代码验证图片链接地址（图片格式可按需增删）
/*
@param { string } value
/
export const isImageUrl = value => /^https?😕/(.+/)+.+(.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(value);
复制代码验证银行卡号（10到30位, 覆盖对公/私账户, 参考微信支付）
/*
@param { string } value
/
export const isAccountNumber = value => /⁶\d{9,29}$/g.test(value);
复制代码验证中文姓名
/*
@param { string } value
/
export const isChineseName = value => /^(?:[\u4e00-\u9fa5·]{2,16})$/g.test(value);
复制代码验证英文姓名
/*
@param { string } value
/
export const isEnglishName = value => /(⁷{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/g.test(value);
复制代码验证车牌号(新能源)
/*
@param { string } value
/
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);
复制代码验证车牌号(非新能源)
/*
@param { string } value
/
export const isLicensePlateNumberNNER = value => /⁸{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/g.test(value);
复制代码验证车牌号(新能源+非新能源)
/*
@param { string } value
/
export const isLicensePlateNumber = value => /^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?😦?:[0-9]{5}[DF])|(?:DF[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年最新公布的手机号段
/*
@param { string } value
/
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开头即可
/*
@param { string } value
/
export const isMPRelaxed = value => /^(?😦?:+|00)86)?1[3-9]\d{9}$/g.test(value);
复制代码验证email(邮箱)
/*
@param { string } value
/
export const isEmail = value => /^[a-zA-Z0-9.!# $a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$ /g.test(value);
复制代码验证座机电话(国内),如: 0341-86091234
/*
@param { string } value
/
export const isLandlineTelephone = value => /\d{3}-\d{8}|\d{4}-\d{7}/g.test(value);
复制代码验证身份证号(1代,15位数字)
/*
@param { string } value
/
export const isIDCardOld = value => /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/g.test(value);
复制代码验证身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X
/*
@param { string } value
/
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位数字)
/*
@param { string } value
/
export const isIDCard = value => /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3} $KaTeX parse error: Undefined control sequence: \d at position 5: )|(^\̲d̲{6}(18|19|20)\d…$ )/g.test(value);
复制代码验证护照（包含香港、澳门）
/*
@param { string } value
/
export const isPassport = value => /(⁹\d{8} $KaTeX parse error: Undefined control sequence: \d at position 66: …][Aa])|(1[45]))\̲d̲{7}$ )/g.test(value);
复制代码验证帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合
/*
@param { string } value
/
export const isWebAccount = value => /¹⁰\w{4,15}$/g.test(value);
复制代码验证中文/汉字
/*
@param { string } value
/
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);
复制代码验证小数
/*
@param { string } value
/
export const isDecimal = value => /^\d+.\d+$/g.test(value);
复制代码验证数字
/*
@param { string } value
/
export const isNumber = value => /^\d{1,}$/g.test(value);
复制代码验证qq号格式
/*
@param { string } value
/
export const isQQNum = value => /¹¹[0-9]{4,10}$/g.test(value);
复制代码验证数字和字母组成
/*
@param { string } value
/
export const isNumAndStr = value => /¹²+$/g.test(value);
复制代码验证英文字母
/*
@param { string } value
/
export const isEnglish = value => /¹³+$/g.test(value);
复制代码验证大写英文字母
/*
@param { string } value
/
export const isCapital = value => /¹⁴+$/g.test(value);
复制代码验证小写英文字母
/*
@param { string } value
/
export const isLowercase = value => /¹⁵+$/g.test(value);
复制代码浏览器操作相关browser工具函数
返回当前url
export const currentURL = () => window.location.href;
复制代码获取url参数（第一种）
/*
@param {*} name
@param {*} origin
*/

export function getUrlParam(name, origin = null) {
let reg = new RegExp("(^|&)" + name + “=([^&]*)(&|$)”);
let r = null;
if (origin == null) {
r = window.location.search.substr(1).match(reg);
} else {
r = origin.substr(1).match(reg);
}
if (r != null) return decodeURIComponent(r[2]);
return null;
}
复制代码获取url参数（第二种）
/**

@param {*} name
@param {*} origin
/
export function getUrlParams(name, origin = null) {
let url = location.href;
let temp1 = url.split(’?’);
let pram = temp1[1];
let keyValue = pram.split(’&’);
let obj = {};
for (let i = 0; i < keyValue.length; i++) {
let item = keyValue[i].split(’=’);
let key = item[0];
let value = item[1];
obj[key] = value;
}
return obj[name];
}
复制代码修改url中的参数
/*
@param { string } paramName
@param { string } replaceWith
/
export function replaceParamVal(paramName,replaceWith) {
var oUrl = location.href.toString();
var re=eval(’/(’+ paramName+’=)([^&])/gi’);
location.href = oUrl.replace(re,paramName+’=’+replaceWith);
return location.href;
}
复制代码删除url中指定的参数
/**
@param { string } name
/
export function funcUrlDel(name){
var loca =location;
var baseUrl = loca.origin + loca.pathname + “?”;
var query = loca.search.substr(1);
if (query.indexOf(name)>-1) {
var obj = {};
var arr = query.split("&");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
obj[arr[i][0]] = arr[i][1];
}
delete obj[name];
var url = baseUrl + JSON.stringify(obj).replace(/["{}]/g,"").replace(/:/g,"=").replace(/,/g,"&");
return url
}
}
复制代码获取窗口可视范围的高度
export function getClientHeight() {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
}
复制代码获取窗口可视范围宽度
export function getPageViewWidth() {
let d = document,
a = d.compatMode == “BackCompat” ? d.body : d.documentElement;
return a.clientWidth;
}
复制代码获取窗口宽度
export function getPageWidth() {
let g = document,
a = g.body,
f = g.documentElement,
d = g.compatMode == “BackCompat” ? a : g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
复制代码获取窗口尺寸
export function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
// ie8及其以下
if (document.compatMode === “BackCompat”) {
// 怪异模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
// 标准模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
复制代码获取滚动条距顶部高度
export function getPageScrollTop() {
let a = document;
return a.documentElement.scrollTop || a.body.scrollTop;
}
复制代码获取滚动条距左边的高度
export function getPageScrollLeft() {
let a = document;
return a.documentElement.scrollLeft || a.body.scrollLeft;
}
复制代码开启全屏
/*
@param {*} element
/
export function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
复制代码关闭全屏
export function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
复制代码返回当前滚动条位置
export const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
复制代码滚动到指定元素区域
export const smoothScroll = element =>{
document.querySelector(element).scrollIntoView({
behavior: ‘smooth’
});
};
复制代码平滑滚动到页面顶部
export const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
复制代码http跳转https
export const httpsRedirect = () => {
if (location.protocol !== ‘https:’) location.replace(‘https://’ + location.href.split(’//’)[1]);
};
复制代码检查页面底部是否可见
export const bottomVisible = () =>{
return document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
};
复制代码打开一个窗口
/*
@param { string } url
@param { string } windowName
@param { number } width
@param { number } height
/
export function openWindow(url, windowName, width, height) {
var x = parseInt(screen.width / 2.0) - width / 2.0;
var y = parseInt(screen.height / 2.0) - height / 2.0;
var isMSIE = navigator.appName == “Microsoft Internet Explorer”;
if (isMSIE) {
var p = “resizable=1,location=no,scrollbars=no,width=”;
p = p + width;
p = p + “,height=”;
p = p + height;
p = p + “,left=”;
p = p + x;
p = p + “,top=”;
p = p + y;
window.open(url, windowName, p);
} else {
var win = window.open(
url,
“ZyiisPopup”,
“top=” +
y +
“,left=” +
x +
“,scrollbars=” +
scrollbars +
“,dialog=yes,modal=yes,width=” +
width +
“,height=” +
height +
“,resizable=no”
);
eval(“try { win.resizeTo(width, height); } catch(e) { }”);
win.focus();
}
}
复制代码自适应页面（rem）
/*
@param { number } width
/
export function AutoResponse(width = 750) {
const target = document.documentElement;
target.clientWidth >= 600
? (target.style.fontSize = “80px”)
: (target.style.fontSize = target.clientWidth / width * 100 + “px”);
}
复制代码日期工具date工具函数
可以参考我的另一篇文章《前端的各种日期操作》，或者直接到我的GitHub查看
浏览器存储相关storage工具函数
主要为浏览器存储方面的工具函数，大部分搬运自大神火狼1
localStorage 存贮
/*
目前对象值如果是函数、RegExp等特殊对象存贮会被忽略
@param { String } key 属性
@param { string } value 值
/
export const localStorageSet = (key, value) => {
if (typeof (value) === ‘object’) value = JSON.stringify(value);
localStorage.setItem(key, value)
};
复制代码localStorage 获取
/*
@param {String} key 属性
/
export const localStorageGet = (key) => {
return localStorage.getItem(key)
};
复制代码localStorage 移除
/*
@param {String} key 属性
/
export const localStorageRemove = (key) => {
localStorage.removeItem(key)
};
复制代码localStorage 存贮某一段时间失效
/*
@param {String} key 属性
@param {*} value 存贮值
@param { number } expire 过期时间,毫秒数
/
export const localStorageSetExpire = (key, value, expire) => {
if (typeof (value) === ‘object’) value = JSON.stringify(value);
localStorage.setItem(key, value);
setTimeout(() => {
localStorage.removeItem(key)
}, expire)
};
复制代码sessionStorage 存贮
/*
@param {String} key 属性
@param {*} value 值
/
export const sessionStorageSet = (key, value) => {
if (typeof (value) === ‘object’) value = JSON.stringify(value);
sessionStorage.setItem(key, value)
};
复制代码sessionStorage 获取
/*
@param {String} key 属性
*/
export const sessionStorageGet = (key) => {
return sessionStorage.getItem(key)
};