- A+
所属分类:Web前端
工具函数
收集项目中常用的工具函数,以备后用,使用 TS 编写。
1. 时间格式化
/** * 格式化时间格式 * @param {*} value 传入时间(单位秒) * @returns 返回时间格式 XX 天 XX 小时 XX 分钟 XX 秒 */ export const formatSecond = function (value: number): string { value = value ?? 0; let secondTime = parseInt(value); // 秒 let minuteTime = 0; // 分 let hourTime = 0; // 小时 let dayTime = 0; // 天 let result = ''; //如果秒数不小于 60,将秒数转换成整数 if (secondTime >= 60) { //获取分钟,除以 60 取整数,得到整数分钟 minuteTime = parseInt(secondTime / 60); //获取秒数,秒数取佘,得到整数秒数 secondTime = parseInt(secondTime % 60); //如果分钟不小于 60,将分钟转换成小时 if (minuteTime >= 60) { //获取小时,获取分钟除以 60,得到整数小时 hourTime = parseInt(minuteTime / 60); //获取小时后取佘的分,获取分钟除以 60 取佘的分 minuteTime = parseInt(minuteTime % 60); //如果小时数不小于 24,将小时转换成天 if (hourTime >= 24) { //获取天,获取小时除以 24,得到整数天 dayTime = parseInt(hourTime / 24); //获取天后取佘的小时 hourTime = parseInt(hourTime % 24); } } } if (secondTime > 0) { result = `${parseInt(secondTime)} 秒`; } if (minuteTime > 0) { result = `${parseInt(minuteTime)} 分 ${result}`; } if (hourTime > 0) { result = `${parseInt(hourTime)} 时 ${result}`; } if (dayTime > 0) { result = `${parseInt(dayTime)} 天 ${result}`; } return result; };
2. 系统、环境和浏览器
/** * 判断是否 PC */ export const isPC = (): boolean => { const userAgentInfo = navigator.userAgent; const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; let flag = true; for (let v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; }; /** * 判断是否微信环境(微信app,桌面微信软件等) */ export const isWechat = (): boolean => { return /MicroMessenger/i.test(window.navigator.userAgent); }; /** * 判断是否 IOS 系统 */ export const isIOS = (): boolean => { const u = navigator.userAgent; return !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); }; /** * 判断是否 Android 系统 */ export const isAndroid = (): boolean => { const u = navigator.userAgent; return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; }; /** * 浏览器 */ export const getBrowser = () => { let explorer = navigator.userAgent.toLowerCase(); let browser = ""; if ( explorer.indexOf("msie") > -1 || !!window.ActiveXObject || "ActiveXObject" in window ) { browser = "IE"; } else if (explorer.indexOf("chrome") > -1) { browser = "chrome"; } else if (explorer.indexOf("firefox") > -1) { browser = "firefox"; } else if (explorer.indexOf("safari") > -1) { browser = "safari"; } else if (explorer.indexOf("opera") > -1) { browser = "opera"; } return browser; }
3. 获取富文本内容中的图片
/** * 获取富文本内容中的图片 */ export const getImgList = (richText: string): string[] => { // 如果富文本内容为空,则没有图片 if (!richText) { return []; } const regex = /<img/g; const imgTags: string[] = richText.match(regex)!; let imgLen = 0; if (imgTags === null) { return []; } else { imgLen = imgTags.length; } // 没有找到图片 if (imgLen === 0) { return []; } const imgElementList: string[] = []; const imgSrcList: string[] = []; richText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match: string, capture: string): string => { imgSrcList.push(capture); imgElementList.push(match); return capture; }); console.log('imgElementList', imgElementList); // 图片标签列表 console.log('imgSrcList', imgSrcList); // 图片 src 属性值列表 return imgSrcList; };
4. 数字隐射字母
// 数字映射字母,如:{1 => "A"}、{2 => "B"} const relationArr: Array<Array<string | number>> = []; for (let i = 0; i < 26; i++) { const symbol: string = String.fromCharCode(65 + i); relationArr.push([i + 1, `${symbol}`]); } const indexSymbolRelationMap = new Map(); relationArr.forEach(([key, value]) => indexSymbolRelationMap.set(key, value)); // 使用 indexSymbolRelationMap.get(index + 1); // index = 1, => A