h5网页实现微信表情包+文字显示

前言(不像前言的前言,哈哈哈哈哈):好久没有更新写文章了,前段时间太忙了,最近有空开始整理下项目中遇到的问题和解决方法。
不知道你们有没有遇到过要求在网页回显微信表情包,反正我是遇见了这样的要求,原因是我们后台有个富文本编辑框需要像微信朋友圈一样编辑,然后网页要回显。然后研究了下,主要用到了正则中的匹配和替换,为了以后遇到能够快速知道方法,特此记录下。
数据来源后端返回:数据大概是这样的字符串(包含了可能出现的所有情况文字+微信表情包+跳转链接+换行符):'微信朋友圈[Rose][Watermelon]万物可爱[Wilt]\n\n\r努努力[BrokenHeart]<a href="www.baidu.com">链接</a>'

var text = '微信朋友圈[Rose][Watermelon]万物可爱[Wilt]\n\n\r努努力[BrokenHeart]<a href="www.baidu.com">链接</a>'
let regex=/\[(.+?)\]/g; // 匹配[]
                            let result,imgArr=[]
                            while((result=regex.exec(text))!=null) {
                                imgArr.push(result[1]) // 取出[]集合
                            }
                            let newStr=text
                            for(let item of imgArr){
                                newStr = newStr.replace("["+item+"]",'<img src="../../static/emoji/'+item+'.png" style="width:24px;height:24px;" />') // 替换微信表情包
                            }
                            newStr=newStr.replace(/[(\r\n)\r\n]+/,"<br />") // 替换换行符
                            newStr=newStr.replace(/\<a(.+?)\>/,"<text>") // 替换链接
                            newStr=newStr.replace("</a>","</text>") // 替换链接
                            console.log(newStr)

如果需要微信表情包图片图的私聊我。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容