這個是暢言的評論系統看到的
點了個發怒， 就會看到 [/發怒]
#然後看到輸出的是背景圖來的。然後靠 background-position去定位
#我想知道的是前端是如何解析 [/發怒] ？ ？
第二、 前端發送給後端不需要處理嗎？直接發送 [/發怒] ？
首先，其實這個不需要前端解析。你可以審查一下編輯器（如下圖）這些表情符號的程式碼，應該也是有類似title="發怒"的屬性值的。前端在點選這些圖示時，直接把圖示元素對應的title拼接成[/...]格式的字串，寫到了文字編輯框裡面去了。
title="發怒"
title
[/...]
第二，前端發送給後端不需要處理，直接發送[/發怒]。
[/發怒]
第三，當獲取別人評論（也就是說不在編輯框裡面而在評論列表中），後端提供給前端的數據就是類似評論評論[/發怒][/發怒]這樣的純文本，由前端將[/...]格式的文字再替換為你看到的以圖片為背景的表情標籤。
評論評論[/發怒][/發怒]
首先，其實這個不需要前端解析。你可以審查一下編輯器（如下圖）這些表情符號的程式碼，應該也是有類似
title="發怒"的屬性值的。前端在點選這些圖示時，直接把圖示元素對應的title拼接成[/...]格式的字串，寫到了文字編輯框裡面去了。第二，前端發送給後端不需要處理，直接發送
[/發怒]。第三，當獲取別人評論（也就是說不在編輯框裡面而在評論列表中），後端提供給前端的數據就是類似
評論評論[/發怒][/發怒]這樣的純文本，由前端將[/...]格式的文字再替換為你看到的以圖片為背景的表情標籤。