工具函数
收集项目中常用的工具函数，以备后用，使用 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
5. 复制到剪切板，兼容 IOS 设备、兼容微信浏览器
export const copyText = (text: string) => {
// 数字没有 .length 不能执行 selectText 需要转化成字符串
const textString = text.toString();
const input = document.createElement('input');
input.id = 'copy-input';
input.readOnly = true; // 防止 ios 聚焦触发键盘事件
input.style.position = 'absolute';
input.style.left = '-1000px';
input.style.zIndex = '-1000';
document.body.appendChild(input);
input.value = textString;
// ios 必须先选中文字且不支持 input.select();
selectText(input, 0, textString.length);
input.blur();
document.body.removeChild(input);
// input 自带的 select() 方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textBox, startIndex: number, stopIndex: number) {
if (textBox.createTextRange) {
//ie
const range = textBox.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex); //起始光标
range.moveEnd('character', stopIndex - startIndex); //结束光标
range.select(); //不兼容苹果
} else {
//firefox/chrome
textBox.setSelectionRange(startIndex, stopIndex);
textBox.focus();
}
}
console.log(document.execCommand('copy'), 'execCommand');
if (document.execCommand('copy')) {
document.execCommand('copy');
// showSuccessToast('复制成功');
console.log("复制成功");
}
};
document.execCommand 已被弃用，但是想要兼容微信浏览器、兼容 IOS 设备还不得不使用它。`。文章来源：https://www.toymoban.com/news/detail-427923.html
还有一个兼容性问题，在微信浏览器中，IOS 设备如果想要复制到剪切板，需要有一个点击操作，比如点击一个按钮。再将一个需要复制到剪切板的内容调用 copyText 函数。直接调用将内容传给该函数调用，复制不成功。需要有一个点击操作。文章来源地址https://www.toymoban.com/news/detail-427923.html
到了这里，关于收集项目中用到的工具函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
