vue聊天功能模块（五）pre标签使得消息表情换行

需求：消息有文本和表情图片

let emojiList = [
    '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',
    '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',
    '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',
    '[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',
    '[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',
    '[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',
    '[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',
    '[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',
    '[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',
    '[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',
    '[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',
    '[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',
    '[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'];
var str = msg.mss.toString();
        for (var i = 0; i < str.length; i++) {
          var x = 0, y = 0, z = 0;
          for (var j = 0; j < str.length; j++) {
            if (str[j] === '[') {
              x = j;
            }
            if (str[j] === '/') {
              y = j;
            }
            if (str[j] === ']') {
              z = j;
            }
            if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {
              str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);
            }
            str = str.replace(/(\r\n|\n|\r)/gm, "<br/>");
          }
        }
        for (let i = 0; i < emojiList.length; i++) {
          let emojiStr = emojiList[i];//[发怒];
          for (var j = 0; j < str.length; j++) {
            /*http://192.168.0.201:1603/Airport/images/emoji/emoji_*/
            str = str.replace(emojiStr,
                '<img  class="replaceMegImg" src="./images/emoji/emoji_' + i + '.png" alt="">');
            str = str.replace(/(\r\n|\n|\r)/gm, "<br/>");
          }
        }
        html += '<span class="msgContent" style="text-align:left;word-break: break-all;color: #ffffff;" >' + str +
            '</span>';
        break;

这样可得以解决，但有个问题是，pre标签使得超过的消息不换行显示，解决：

pre { 
white-space: pre-wrap; /*css-3*/ 
white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
white-space: -pre-wrap; /*Opera4-6*/ 
white-space: -o-pre-wrap; /*Opera7*/ 
word-wrap: break-word; /*InternetExplorer5.5+*/ 
} 

效果