前言(不像前言的前言,哈哈哈哈哈):好久没有更新写文章了,前段时间太忙了,最近有空开始整理下项目中遇到的问题和解决方法。
不知道你们有没有遇到过要求在网页回显微信表情包,反正我是遇见了这样的要求,原因是我们后台有个富文本编辑框需要像微信朋友圈一样编辑,然后网页要回显。然后研究了下,主要用到了正则中的匹配和替换,为了以后遇到能够快速知道方法,特此记录下。
数据来源后端返回:数据大概是这样的字符串(包含了可能出现的所有情况文字+微信表情包+跳转链接+换行符):'微信朋友圈[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)
如果需要微信表情包图片图的私聊我。