程式碼地址在
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 |
合併 |
換行 |
換行 |
換行 |