How to use Twemoji and how to display it in textarea

Twitter has published open-source complete Emoji images. Developers can go to GitHub to download the complete emojis library and add these emojis to their own applications or webpages.
The chat projects over the past few days have been easy to use.
Call method

<Script src = "/js/twemoji. min. js"> </script>
<Script>
Twemoji. parse (document. getElementById ('Emoji-list'), {size: 36 });
</Script>

HTML code

<Ul id = "emoji-list">
<Li title = "smiley" >&# x1F601; </li>
<Li title = "crying" >&# x1F602; </li>
<Li title = "emotion 1" >&# x1F603; </li>
<Li title = "emotion 2" >&# x1F604; </li>
<Li title = "emotion 3" >&# x1F605; </li>
<Li title = "emotion 4" >&# x1F606; </li>
<Li title = "emotion 5" >&# x1F607; </li>
<Li title = "emotion 6" >&# x1F608; </li>
<Li title = "emotion 7" >&# x1F609; </li>
<Li title = "emoticons 8" >&# x1F60A; </li>
<Li title = "emojis 9" >&# x1F60B; </li>
<Li title = "emotion 10" >&# x1F60C; </li>
</Ul>

OK. You can call these two codes. After the call, how to display it in textarea and display it submitted to the page. Because the emoji encoding is converted to an image, and textarea cannot save the image, the emoji encoding cannot be used in textarea at this time, but the bitwise encoding needs to be converted again after submission, therefore, there is a replacement process in this process. Therefore, we add a title attribute to each emoticon list. Html code is displayed. Next, replace.

HTML code

<Div class = "inputArea">
<Form>
<Textarea> </textarea>
<Button type = "button" onClick = "onMessageSend ()"> Send </button>
</Form>
</Div>
<Div class = "show"> </div>

Click emoticon js code

$ ('# Emoji-list li'). on ('click', function (){
$ (". InputArea textarea"). focus (); // get the focus of the input box
$ (". InputArea textarea "). val ($ (". inputArea textarea "). val () + '[' + $ (this ). attr ("title") + ']');
});

Send code

$ (". InputArea textarea"). ctrlEnter ("button", function (){
// Obtain the value in textarea and replace the carriage return space
Var chatMessage = $ ('. inputArea textarea '). val (). replace (/\ n/g ,'_@'). replace (/\ r/g ,'_#');
ChatMessage = chatMessage. replace (/_ # _ @/g, '<br/>'); // IE7-8
ChatMessage = chatMessage. replace (/_ @/g, '<br/>'); // IE9, FF, chrome
// Replace, write only part
ChatMessage = chatMessage. replace (// \ [crying face \]/g, '& # x1F602 ;');
ChatMessage = chatMessage. replace (/\ [smiling face \]/g, '& # x1F601 ;');
ChatMessage = chatMessage. replace (/\ [expression 1 \]/g, '& # x1F602 ;');
ChatMessage = chatMessage. replace (/\ [expression 2 \]/g, '& # x1F604 ;');
ChatMessage = chatMessage. replace (/\ [Expression 3 \]/g, '& # x1F605 ;');
ChatMessage = chatMessage. replace (/\ [expression 4 \]/g, '& # x1F606 ;');
Twemoji. parse (document. getElementsByTagName ('body') [0], {size: 36 });
});
When sending code, the specific operation protocol is not written. This is mainly about the transcoding of emoji expressions and text replacement.