JS替换自定义表情图片代码

我们经常在前端需要处理这种含有表情符号的文本

‘[微笑][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]+\]/g
    var pattern2 = /\[[\u4e00-\u9fa5]+\]/
    var contents = '[微笑]美女[色]你好[害羞]在吗？'
    content = contents.match(pattern1)
    str = contents
    for (i = 0; i < content.length; i++) {
        for (j = 0; j < json.length; j++) {
        if ('[' + json[j].title + ']' == content[i]) {
          src = json[j].src
          break
        }
      }
      str = str.replace(pattern2, src)
    }
    console.log({str})

第二种，一次循环

      var json = {
      '[微笑]':'CCCC',
      '[色]':'BBB',
      '[害羞]':'AAAA',
      '[haha讨厌]':"DDD",
      '[sasa1231]':"EEEE"
    }
    var pattern1 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/g
    var pattern2 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/
    var contents = '[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[mulu讨厌][sasa1231]？'
    content = contents.match(pattern1)
    str = contents
    for (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]+\]/g
  const pattern2 = /\[[\u4e00-\u9fa5_a-zA-Z]+\]/
  let emotions = content.match(pattern1)
  let str = content
  for (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})