js解析QQ表情和emoji表情
使用的是vue思路:前端接受到的消息(我是json格式),匹配出QQ表情和emoji匹配的格式见代码,需要注意的是emoji要先把数据通过escape转换成unicode之后再匹配匹配的结果都是数组,遍历数组,将匹配的内容替换为img,emoji replace后需要unescape一下v-for遍历之后,使用v-html展示内容,不能用v-text,不然选然后是字符串需要有qq_a...
·
使用的是vue
思路:
- 前端接受到的消息(我是json格式),匹配出QQ表情和emoji
- 匹配的格式见代码,需要注意的是emoji要先把数据通过escape转换成unicode之后再匹配
- 匹配的结果都是数组,遍历数组,将匹配的内容替换为img,emoji replace后需要unescape一下
- v-for遍历之后,使用v-html展示内容,不能用v-text,不然选然后是字符串
- 需要有qq_arry={‘表情’,‘url地址’},emoji={‘e…’,‘1f…’}前面是微信的emoji表情编码后面是对应的emoji表情编码;这里你也可以向qq表情一样保存emoji表情编码和url地址
- 其他 本法的emoji表情和微信emoji有差异;
直接上js
chats2 () {
// 这里是要解析的数据,我是json
let chats = this.chats
// 解析后的数据
let chats2 = {}
// 匹配QQ表情
let reg = /\[[\u4e00-\u9fa5]{1,3}\]|\[\w{1,3}\]/gi
// 匹配emoji
let reg2 = /\\uE[\w]{3}/gi
// 替换的规则
let reg3 = /%ue|%uE/g
// 换行
let reg4 = /%0A/g
let i = 0
// 如果有内容
if (chats[0]) {
for (const chat of chats) {
let val = chat.content
console.log(escape(val))
// 判断数据类型,有很多类型 这里只展示text
if (chat.contentType === 'Text') {
let results = val.match(reg)
// 如果消息中有QQ表情
if (results) {
for (const res of results) {
let r = res.replace('[', '').replace(']', '')
// phizList {''key,'value'} key是'微笑' val是 url
val = val.replace(res, '<img src="' + this.phizList[r] + '" alt="" >')
}
}
let val2 = escape(val).replace(reg3, '\\ue')
val2 = val2.replace(reg4, '<br/>')
let results2 = val2.match(reg2)
// console.log(results2)
if (results2) {
for (const emoji of results2) {
// console.log(emoji)
// emojiArr= {'key','value'} key是表情编码 value是对应的url的文件名
let pngName = emojis.emojiArr[emoji.replace('\\u', '').toLowerCase()]
// console.log(pngName)
// 这个也能显示emoji 不过效果差异比较明显
// val2 = val2.replace(emoji, '&#x' + pngName + ';')
val2 = val2.replace(emoji, '<img style="width:18px;height:18px;margin-right:1px;display:inline;" src="https://twemoji.maxcdn.com/2/72x72/' + pngName + '.png" alt="" >')
}
}
chat['content'] = unescape(val2)
}
chats2[i] = chat
// console.log(chats2)
i++
}
}
console.log(chats2)
return chats2
}
html
<div v-if="chat.contentType==='Text'" class="triangle text" v-html="chat.content"></div>
欢迎留言交流
更多推荐
已为社区贡献27条内容
所有评论(0)