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+*/
}

效果

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

vue聊天功能模块（九）艾特功能实现
预览艾特开始思路:输入ctrl +@ ,弹出群成员列表弹框,点击成员时,把成员名称添加到输入框,同时隐藏弹框 1.点击弹框外任意位置,把弹框关闭即可 2.点击删除键时,把@和名称删掉 3.要实现艾 ...
vue聊天功能模块（四）聊天消息换行
需求:ctrl+回车换行回车发送消息  <div class="messagesBox-BigRight-down20-input"> ...
vue 的v-pre指令和pre标签
vue 的v-pre指令和pre标签 1. vue的pre指令不加v-pre代码不加v-pre效果图加v-pre代码加v-pre效果图 2. vue的pre标签不加pre标签代码不加pre ...
HTML中的pre标签表示空格或换行
1.用法场景保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...
android仿微信语音聊天功能,Android仿微信发送语音消息的功能及示例代码
微信的发送语音是有一个向上取消的,我们使用ontouchlistener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private mediaplayer mplayer ...
软件测试工程师——聊天功能是怎么测试的
目录一.软件测试点分析基本原则--通用二.京东产品的核心业务流程三.聊天功能需求(红框需要测试): 四.聊天功能测试点五.确认聊天的联系人类型: 前言我们生活中遇到的聊天软件经常是五花八门的 ...
[系统安全] 四十五.APT系列(10)Metasploit后渗透技术信息收集、权限提权和功能模块详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
vue 功能模块后台可配置_Github14k的Springboot后台管理系统
关注爱编码.挖掘优秀项目. 本期给各位带来的一款优质的后台管理系统:EL-ADMIN 后台管理系统. 简介该项目由大神elunez一手大打造.它是一个基于 Spring Boot 2.1.0 . S ...
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
前言最近刚好在做这方面的功能,就网上看了下,发现很多种写法,但是有些写的很乱, 我也看的很麻烦,干脆就自己写一个简单的静态版本放在这, 以后需要用到的时候可以直接拿着改改就能用. 后面我还会继续更新 ...
Vue Cli 3项目使用融云IM实现聊天功能
介绍:前台使用vue+vant开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程 ...

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

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

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

效果

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

最新文章

热门文章