这个是畅言的评论系统看到的
点了个发怒， 就会看到 [/发怒]
然后看到输出的是背景图来的。然后靠 background-position去定位
我想知道的是前端是如何解析 [/发怒] ？？
第二、 前端发送给后端不需要处理吗？ 直接发送 [/发怒] ？
首先，其实这个不需要前端解析。你可以审查一下编辑器（如下图）这些表情符号的代码，应该也是有类似title="发怒"的属性值的。前端在点击这些图标时，直接把图标元素对应的title拼接成[/...]格式的字符串，写到了文本编辑框里面去了。
title="发怒"
title
[/...]
第二，前端发送给后端不需要处理，直接发送[/发怒]。
[/发怒]
第三，当获取别人评论（也就是说不在编辑框里面而在评论列表中），后端提供给前端的数据就是类似评论评论[/发怒][/发怒]这样的纯文本，由前端将[/...]格式的文本再替换为你看到的<span ... title="发怒" class="face-item ..."></span>以图片为背景的表情标签。
评论评论[/发怒][/发怒]
<span ... title="发怒" class="face-item ..."></span>
首先，其实这个不需要前端解析。你可以审查一下编辑器（如下图）这些表情符号的代码，应该也是有类似
title="发怒"的属性值的。前端在点击这些图标时，直接把图标元素对应的title拼接成[/...]格式的字符串，写到了文本编辑框里面去了。第二，前端发送给后端不需要处理，直接发送
[/发怒]。第三，当获取别人评论（也就是说不在编辑框里面而在评论列表中），后端提供给前端的数据就是类似
评论评论[/发怒][/发怒]这样的纯文本，由前端将[/...]格式的文本再替换为你看到的<span ... title="发怒" class="face-item ..."></span>以图片为背景的表情标签。