关于js中replace的使用

项目使用了表情包，后台给我的数据只有字符串，在字符串里包含表情包对应的字符串。

在前台解析的时候需要将这些字符串转换成图片输出到页面上。

表情包相应的json数据如下：

大致的思路就是根据结果返回的表情的字符串值去匹配json里对应的对象，把对象的icon拼接到图片的src里。

首先我使用了正则和字符串的match方法，来获取这些特殊的表情字符串组成的数组emojiResult。

在页面console.log结果如下：

接下来将数组的每一项的文字转为对应的表情<img>标签：

这里的this.emojis就是json数据里的emojis数组。通过数组的find方法（参数为一个函数）可以匹配数组中对应的项，然后将匹配项的icon拼接到图片的src路径里。

然后使用forEach对数组进行遍历，使用字符串的replace方法替换结果字符串的每一个匹配项。注意：这里的正则不能是全局匹配/g，而是单个匹配，这样才能将数组的每一个img标签一一替换到结果字符串里。replace会依次替换正则匹配项直到所有的匹配项全部替换完毕，replace方法不改变原字符串，需要将结果赋值给原字符串以改变原字符串。

最后，使用v-html原样输出结果字符串，遇到img标签就输出表情图片，遇到文本则输出文本。