我们经常在前端需要处理这种含有表情符号的文本
‘[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[haha讨厌][sasa1231]？’
一般情况，我都是放在后端做映射。
今天，有个需求需要在前端做。
大概理了下。
在前端做个映射表配置。这个配置内容我在后端下发。
配置文件想了两种形式。
输出结果如下
// 只处理了字母和汉字CCCCDDD美女BBB你好AAAABBB在吗DDD[sasa1231]？
第一种，需要两次循环
var json = '[{"title":"微笑","src":14},{"title":"撇嘴","src":2},{"title":"色","src":3}]'json = eval('(' + json + ')')var pattern1 = /\[[\u4e00-\u9fa5]+\]/gvar pattern2 = /\[[\u4e00-\u9fa5]+\]/var contents = '[微笑]美女[色]你好[害羞]在吗？'content = contents.match(pattern1)str = contentsfor (i = 0; i < content.length; i++) {for (j = 0; j < json.length; j++) {if ('[' + json[j].title + ']' == content[i]) {src = json[j].srcbreak}}str = str.replace(pattern2, src)}console.log({str})
第二种，一次循环
var json = {'[微笑]':'CCCC','[色]':'BBB','[害羞]':'AAAA','[haha讨厌]':"DDD",'[sasa1231]':"EEEE"}var pattern1 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/gvar pattern2 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/var contents = '[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[mulu讨厌][sasa1231]？'content = contents.match(pattern1)str = contentsfor (i = 0; i < content.length; i++) {console.log(content[i])str = str.replace(pattern2, json[content[i]])}console.log({str})
封装函数
/*** 表情替换* @param {Object} config 表情映射文件* @param {String} content 文本* @param {Function} renderFunc 渲染函数*/export function renderEmotion(config,content,renderFunc = (e) => {return e}) {const pattern1 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/gconst pattern2 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/let emotions = content.match(pattern1)let str = contentfor (const key in emotions) {str = str.replace(pattern2, renderFunc(config[emotions[key]]))}return str}
调用
let res = renderEmotion({'[微笑]': 'CCCC','[色]': 'BBB','[害羞]': 'AAAA','[haha讨厌]': 'DDD','[sasa1231]': 'EEEE'},'[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[mulu讨厌][sasa1231]？',(e) => {return `<img src='${e}' class='smile' />`})console.log({res})
