前言：
由於公司開發項目需要用到表情插件，在網上百度了好久，很多表情插件，都是需要引用好多js文件，也沒有現成的demo可以使用，還有一些插件是引用好多圖片，每一個表情都要重新請求一下。為了這樣一個功能，要引入好多js，img，也是得不償失……
所以，博主自己碼了一個小巧的“表情插件”，方便以後項目直接使用。
功能
功能：傳遞表情對應的字符格式到後台，後台返回字符串，前端將該字符串解析展示成相應的表情展示在頁面上。
使用方法：
在option中配置需要的參數
var option = {emojiArray: ['angry'], //填寫表情字符串的數組，【注：源文件image下面的圖標，只需要寫紅框內的字符串，詳見下圖】textareaId: 'emoji-editor', //輸入框的idloadId: 'load', //加載表情的idemojiContainer: 'emojiContainer', //存儲表情的容器對象sendId: 'send', //發送信息的按鈕idemojiTranslateCls:'emoji-comment', //需要轉換成表情（img）的容器類名，只需要添加一個類，即可自動將:kissing_heart:渲染成表情~};/*調用方法*/var text = new Emoji(option);text.init();大致效果截圖：（ui方面可以根據各自需要進行美化）
點擊發送後，發送給後台的數據是：
表情插件的三個原理：
•如何顯示表情？
CSS Sprites(圖片整合技術)，先設定好背景圖標，然後定義每一個小圖標的position，width，height，即可顯示想要顯示的表情。 期間遇到的問題：如何控制顯示表情的大小？ 首先想到的是background-size這個方法，但是要重新定義它的position，非常耗費“體力”，後來，柳暗花明，發現一個屬性transform: scale(1.5); 控制當前元素縮放比率，哈哈，一行代碼就搞定啦~想要表情大，還是小，尺寸不滿意？通通一行代碼搞定•如何在輸入框中顯示表情圖標？
一開始是選擇input 的textarea，但是，將表情img “append”到這個輸入框後面，也沒有顯示出這個圖標，後來嘗試了div，再“append”之後，發現能夠成功顯示表情，但是div又不能輸入文字，無果……
初步想法：使用input監聽，將textarea值實時加到div中，同樣的，這個也是費力不討好~繼續探索……
後來發現一個很大眾的屬性。 contenteditable="true"，又愉快的選擇了contenteditable。
一開始是用span承載表情圖標，但是用div或者span標籤放置圖像，則contenteditable會默認加到最後的div/span中……，所以會導致輸入表情圖標後，再輸入文字，最後的文字會在最後一個div/span中，導致沒有顯示文字。好吧……真是心累……
既然div/span 不可以，就使用img標籤承載表情，這下終於能夠正常輸入了。
【contenteditable有一個問題，它支持富文本，不安全，而且用戶體驗不好。 】
比如：用戶粘貼的時候，會自動帶格式，例子如下：
這邊是採用網上大神的一段代碼，去除掉富文本功能，具體參考：某大神博文
•如何對圖片和文字進行轉換？
這時候就要使用強大的正則了，先用html（）獲取內容，再對內容進行處理。 轉換成文字：
1 content.replace(/<img/b[^>]*/, imgObj[j]) //匹配所有的<img />，替換成相應的格式
2 imgObj.push(format + img[i].getAttribute("alt") + format); //這裡的format我使用的是： 所以就是類似這樣:fearful: 的格式轉換成圖片：
var keys = '//+|-||||ball|a|ab|abc|abcd|accept……' //這裡只列出部分regex = new RegExp(':(' + keys + '):', 'g'), // 匹配格式形如這樣子的格式：：$(obj[i]).html().replace(regex, emoji) //替換function emoji() {var key = arguments[];return '<img src=""class="emoji emoji_' + key + '"/>'; //返回對應的img格式}整個插件的代碼格式，也是比較常見的封裝方式
//Emoji對象可變的屬性function Emoji(option) {this.emoji = option.emojiArray,this.textareaId = option.textareaId,this.loadId = option.loadId,this.sendId = option.sendId,this.emojiContainer = option.emojiContainer,this.emojiTranslateCls = option.emojiTranslateCls;}//每一次生成一個實例，上面的屬性都會重新生成一次，這樣對於固定的方法，會多佔用一些內存。這樣既不環保，也缺乏效率。所以可以把那些不變的屬性和方法，直接定義在prototype對像上。這時所有固定的方法，其實都是同一個內存地址，指向prototype對象，因此就提高了運行效率。
Emoji.prototype = {init: function () { //放一些初始化的方法this.toEmoji();this.loadEmoji();this.bindEvent();},bindEvent: function () {},toEmoji: function () {}, //服務器數據轉換成表情toText: function () {} //轉換成文字loadEmoji: function () {} //加載表情}好啦，這樣一個表情插件就算完工了，係不系很簡單？目前暫時需要依賴jquery，之後如果有精力的話繼續搗鼓一個基於原生js的O(∩_∩)O，具體的實現代碼在github上。 最後，附上github地址：https://github.com/beidan/emoji
以上所述是小編給大家介紹的JavaScript從0開始構思表情插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！