emoji表情包预览

emojihomepage.com/

场景

在对表单input填写或者显示时，很多情况下，对于自带的表情处理欠缺，很多前端开发者不会考虑，而后端数据库表编码又不支持这些，我们可以有多种处理方式，例如：让后端数据库改为utf8mb4 存储形式、前端把表情进行base-64编码然后encode和decodec处理、把表情转为图片，或者引入emoji插件、或者npm install emoji等。而本次介绍的是前端使用转码形式对表情进行处理。

对表情进行转义为字符串

当你把数据传给后端前，你需要对即将传输的数据进行转义，这样，不管后端使用什么数据格式的存储形式，都不会报错。

/**
 * 对emoji表情转义
 * @method utf16toEntities
 * @param {*} strs
 * @returns
 */
export const utf16toEntities = (strs) => {
  let str = strs;
  if (!str) {
    str = '';
  }
  try {
    str = str.toString();
  } catch (err) {
    return str;
  }
  const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
  str = str.replace(patt, (char) => {
    let H;
    let L;
    let code;
    if (char.length === 2) {
      H = char.charCodeAt(0); // 取出高位
      L = char.charCodeAt(1); // 取出低位
      // eslint-disable-next-line no-mixed-operators
      code = (H - 0xd800) * 0x400 + 0x10000 + L - 0xdc00; // 转换算法
      return `&#${code};`;
    }
    return char;
  });
  return str;
};

把字符串转义为表情

当后端把数据传过来给你，在把数据展示到页面前，你需要重新把这些数据进行反转义为用户可见的表情。

/**
 * 对emoji表情转反义
 * @method utf16toEntities
 * @param {*} strs
 * @returns
 */
export const uncodeUtf16 = (strs) => {
  let str = strs;
  if (!str) {
    str = '';
  }
  try {
    str = str.toString();
  } catch (err) {
    return str;
  }
  // eslint-disable-next-line no-useless-escape
  const reg = /\&#.*?;/g;
  const result = str.replace(reg, (char) => {
    let H;
    let L;
    let code;
    if (char.length === 9) {
      // eslint-disable-next-line radix
      code = parseInt(char.match(/[0-9]+/g));
      H = Math.floor((code - 0x10000) / 0x400) + 0xd800;
      L = ((code - 0x10000) % 0x400) + 0xdc00;
      return unescape(`%u${H.toString(16)}%u${L.toString(16)}`);
    }
    return char;
  });
  return result;
};