收集项目中用到的工具函数

工具函数

收集项目中常用的工具函数，以备后用，使用　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 设备还不得不使用它。`。

还有一个兼容性问题，在微信浏览器中，IOS 设备如果想要复制到剪切板，需要有一个点击操作，比如点击一个按钮。再将一个需要复制到剪切板的内容调用 copyText 函数。直接调用将内容传给该函数调用，复制不成功。需要有一个点击操作。