原生js 實現輸入框emoji表情發佈

代碼地址在 github地址

emogi 實現思路

• 頁面首先有一個textarea 輸入框 點擊發布按鈕 還有一個表情圖列表
• 表情圖列表實際上是每一張圖片在代替表情包 在這裏我用了六張圖片代替六個表情包
• 點擊單獨的每一個表情包 會把對應得表情包轉有屬性 添加到輸入框 例如[跪了]
• 而後點擊發布的時候 進行正則匹配每一個表情包屬性 替換成對應得圖片路徑便可
• 在這裏碰到了一個問題，如何保留文本輸入框的換行符空白符，
• 我想過用正則匹配換行符空白符，而後進行替換，後來發現有一個css的屬性特別好用 white-space:pre

我以爲white-space這個css屬性特別好用，之前沒有着重關注過，恰好在這裏用到

• white-space:normal 默認，空白會被瀏覽器忽略 normal表示合併空格，多個相鄰空格合併成一個空格，在源碼中的換行做爲空格處理，只會根據容器的大小進行自動換行。 這裏的空白是值空白字符，包括空格，製表符等空白字符，下面爲了行文方便，統一用「空格」表明。

white-space:nowrap不換行

white-space:nowrap和normal同樣，也合併空格，可是不會根據容器大小換行，表示不換行。
white-space:nowrap會致使文本不換行，常常和overflow,text-overflow一塊兒使用
複製代碼

white-space:pre保留空格不換行

white-space:pre的做用是保持源碼中的空格，有幾個空格算幾個空格顯示，同時換行只認源碼中的換行和<br/>標籤。
複製代碼

white-space:pre-wrap保留空格換行

white-space:pre-wrap的做用是保留空格，而且除了碰到源碼中的換行和<br/>會換行外，還會自適應容器的邊界進行換行。
white-space:pre-wrap和white-space:pre的區別就是會自適應容器的邊界進行換行。
複製代碼

white-space:pre-line合併空格換行

white-space:pre-line的做用是合併空格，換行和white-space:pre-wrap同樣，遇到源碼中的換行和<br/>會換行，碰到容器的邊界也會換
行。
複製代碼

white-space屬性	源碼空格	源碼換行	換行	容器邊界換行
normal	合併	忽略	換行	換行
nowrap	合併	忽略	換行	不換行
pre	保留	保留	換行	不換行
pre-wrap	保留	保留	換行	換行
pre-line	合併	換行	換行	換行