正则表达式提取文字内容中的聊天表情

Question

最近做聊天室项目需要把用户输入的文本内容转换为图片表情
例如：

'你好[hehe]，试试' => 你好<img src="hehe.png">,试试
[hehe]这种格式的就是一个表情，需要替换成图片
由于模块化和安全考虑，不能直接把出现的位置直接替换成html，需要返回一个数组，text、img按照顺序排列，自己用正则处理的，尽管能实现，但是个人不太满意：

'[ss]s[sdd][sdf]sd'.split(/(?=\[[A-Za-z\u4E00-\u9FA5\uF900-\uFA2D]+?])/).reduce(function (prev, curr) {
  let index = curr.indexOf(']')
  let first = curr.substr(0, index + 1)
  let last = curr.substr(index + 1)
  return prev.concat([first, last])
}, [])
// ["[ss]", "s", "[sdd]", "", "[sdf]", "sd"]

有没有做过类似需求的正则大佬？

Answer 1

关于split一个不为人知的地方：

匹配的正则中的捕获分组会被添加到结果中！

'[ss]s[sdd][sdf]sd'.split(/(\[[^[\]]+\])/)
// 搞定！=> ["", "[ss]", "s", "[sdd]", "", "[sdf]", "sd"]

Answer 2

> '[ss]s[sdd][sdf]sd'.match(/\[[^\[\]]+\]/g)
[ '[ss]', '[sdd]', '[sdf]' ]

---

> '[ss]s[sdd][sdf]sd'.replace(/\[([^\[\]]+)\]/g, '<img src="$1.png">')
'<img src="ss.png">s<img src="sdd.png"><img src="sdf.png">sd'

---

> '[ss]s[sdd][sdf]sd'.replace(/(\[[^\[\]]+\])/g, '|$1|').split('|')
[ '', '[ss]', 's', '[sdd]', '', '[sdf]', 'sd' ]