問題描述

這個是暢言的評論系統(tǒng)看到的

點了個發(fā)怒， 就會看到 [/發(fā)怒]

然后看到輸出的是背景圖來的。然后靠 background-position去定位

我想知道的是前端是如何解析 [/發(fā)怒] ？？

第二、 前端發(fā)送給后端不需要處理嗎？ 直接發(fā)送 [/發(fā)怒] ？

問題解答

首先，其實這個不需要前端解析。你可以審查一下編輯器（如下圖）這些表情符號的代碼，應(yīng)該也是有類似title='發(fā)怒'的屬性值的。前端在點擊這些圖標(biāo)時，直接把圖標(biāo)元素對應(yīng)的title拼接成[/...]格式的字符串，寫到了文本編輯框里面去了。

第二，前端發(fā)送給后端不需要處理，直接發(fā)送[/發(fā)怒]。

第三，當(dāng)獲取別人評論（也就是說不在編輯框里面而在評論列表中），后端提供給前端的數(shù)據(jù)就是類似評論評論[/發(fā)怒][/發(fā)怒]這樣的純文本，由前端將[/...]格式的文本再替換為你看到的<span ... class='face-item ...'></span>以圖片為背景的表情標(biāo)簽。