想起最近开发APP的时候，产品提的一个需求，用户的帖子正文还有评论内容里，要能够显示emoji表情，因为我们这款app是混合开发的，APP里的发贴，发评论是原生做的（android和ios）,但帖子详情页又是我们前端H5做的，那么问题就来了：

第一：原生发帖的时候，emoji表情嵌套在正文里，可能存在一个，或者多个，前端如何才能正常展示？

第二：原生再次编辑帖子的时候，他怎么拿到emoji，正常显示呢？

后台将emoji表情搞成链接，嵌套在正文里？？？链接长度和内容不可控，肯定不行。

下面我直接说经过讨论后的解决方案，我只说前端部分，原生那边解决方法是同理，大家以后遇到这样的需求，仅供参考，后面封装了js代码，可以直接调用方法，最后提一下，我用的是vue框架

先说解决方案：

原生编辑帖子，将对应的emoji表情用对应的字段表示，这个大家要约定好，比如emoji1 表示微笑，emoji2表示沮丧，直接发送给后台，前端调用后台接口，得到含有emoji标记字段的正文内容，对正文进行查找，如果存在标记字段，用img 标签替换所有的emoji 字段，将存储在本地对应的emoji图片路径绑定在img的src上，最后将处理好的正文，v-html渲染

<template>
  <div>
      <div v-html="Emoji('要处理的内容')"></div>
  </div>
</template>
import { Emoji } from './../static/js/Emoji.js'

export default {

    Emoji:Emoji

}

下面是封装的emoji方法

var emojiArr = [];          // 用于存储emoji的空数组
var devicePixelRatio = ''// 设备像素比
var fn= () =>{
   devicePixelRatio = window.devicePixelRatio
}
fn()
var emojisNum = 48;         // 当前本地emoji表情的数量

//循环出emoji数组
for (let i = 1; i <= emojisNum; i++) {
  let url = require(`../../static/images/emoji/emoji_${i}@${devicePixelRatio}x.png`);
  emojiArr.push({
    url: url,
    str: `[emoji_${i}]`
  })
}

//接收到的字符串与命名好的emoji字符串匹配
const getEmoji = (str) => {
  for (let i = 0; i < emojisNum; i++) {
    if (str == emojiArr[i].str) {
      return emojiArr[i].url;
    }
  }
  return str;
};

//相匹配的字符串则替换成emoji图片
export function toEmoji(value) {
  let emojiArrMatch = value.match(/\[emoji_(.{1,4})\]/ig) || [];
  let len = emojiArrMatch.length;
  if (len == 0) {  //如果正文里没有emoji字段，原文输出
    return value;
  }
  emojiArrMatch.forEach(function(item) {
    let url = getEmoji(item);
    value = value.replace(item, `<img class=emoji src=${url}>`);
  })
  return value;
}