工具函數

收集項目中常用的工具函數，以備後用，使用　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