jquery 表情輸入框，可存數據庫

前兩天優化博客的時候，想在留言評論版塊插入表情輸入功能，并且用戶能夠存入數據庫，并且可以在前臺讀取展示，于是研究了一下表情包，解決方法如下：

• 下載表情包gif圖
  我下載的是新浪的表情包并且編譯如下：
  
  image.png

• 表情路徑和表情內容結合整理

 var faceList=[
            {'title':'微笑','url':'weixiao.gif'},
            {'title':'嘻嘻','url':'xixi.gif'},
            {'title':'哈哈','url':'haha.gif'},
            {'title':'可愛','url':'keai.gif'},
            {'title':'可憐','url':'kelian.gif'},
            {'title':'挖鼻','url':'wabi.gif'},
            {'title':'吃驚','url':'chijing.gif'},
            {'title':'害羞','url':'haixiu.gif'},
            {'title':'擠眼','url':'jiyan.gif'},
            {'title':'閉嘴','url':'bizui.gif'},
            {'title':'鄙視','url':'bishi.gif'},
            {'title':'愛你','url':'aini.gif'},
            {'title':'淚','url':'lei.gif'},
            {'title':'偷笑','url':'touxiao.gif'},
            {'title':'親親','url':'qinqin.gif'},
            {'title':'生病','url':'shengbing.gif'},
            {'title':'太開心','url':'taikaixin.gif'},
            {'title':'白眼','url':'baiyan.gif'},
            {'title':'右哼哼','url':'youhengheng.gif'},
            {'title':'左哼哼','url':'zuohengheng.gif'},
            {'title':'噓','url':'xu.gif'},
            {'title':'衰','url':'shuai.gif'},
            {'title':'吐','url':'tu.gif'},
            {'title':'哈欠','url':'haqian.gif'},
            {'title':'抱抱','url':'baobao.gif'},
            {'title':'怒','url':'nu.gif'},
            {'title':'疑問','url':'yiwen.gif'},
            {'title':'饞嘴','url':'chanzui.gif'},
            {'title':'拜拜','url':'baibai.gif'},
            {'title':'思考','url':'sikao.gif'},
            {'title':'汗','url':'han.gif'},
            {'title':'困','url':'kun.gif'},
            {'title':'睡','url':'shui.gif'},
            {'title':'錢','url':'qian.gif'},
            {'title':'失望','url':'shiwang.gif'},
            {'title':'酷','url':'ku.gif'},
            {'title':'色','url':'se.gif'},
            {'title':'哼','url':'heng.gif'},
            {'title':'鼓掌','url':'guzhang.gif'},
            {'title':'暈','url':'yun.gif'},
            {'title':'悲傷','url':'beishang.gif'},
            {'title':'抓狂','url':'zhuakuang.gif'},
            {'title':'黑線','url':'heixian.gif'},
            {'title':'陰險','url':'yinxian.gif'},
            {'title':'怒罵','url':'numa.gif'},
            {'title':'互粉','url':'hufen.gif'},
            {'title':'書呆子','url':'shudaizi.gif'},
            {'title':'憤怒','url':'fennu.gif'},
            {'title':'感冒','url':'ganmao.gif'},
            {'title':'心','url':'xin.gif'},
            {'title':'傷心','url':'shangxin.gif'},
            {'title':'豬','url':'zhu.gif'},
            {'title':'熊貓','url':'xiongmao.gif'},
            {'title':'兔子','url':'tuzi.gif'},
            {'title':'OK','url':'ok.gif'},
            {'title':'耶','url':'ye.gif'},
            {'title':'GOOD','url':'good.gif'},
            {'title':'NO','url':'no.gif'},
            {'title':'贊','url':'zan.gif'},
            {'title':'來','url':'lai.gif'},
            {'title':'弱','url':'ruo.gif'},
            {'title':'草泥馬','url':'caonima.gif'},
            {'title':'神馬','url':'shenma.gif'},
            {'title':'囧','url':'jiong.gif'},
            {'title':'浮云','url':'fuyun.gif'},
            {'title':'給力','url':'geili.gif'},
            {'title':'圍觀','url':'weiguan.gif'},
            {'title':'威武','url':'weiwu.gif'},
            {'title':'話筒','url':'huatong.gif'},
            {'title':'蠟燭','url':'lazhu.gif'},
            {'title':'蛋糕','url':'dangao.gif'},
            {'title':'發紅包','url':'fahongbao.gif'}
        ]

• 頁面結構布完整

<div class="box">
    <div class="face-box">
            <textarea name="face" id="" cols="30" rows="10" placeholder="說點什么呢``" ></textarea>
            <div class="face-sina">
                <div class="face-logo">
                    <span>sina表情</span>
                </div>
                <div class="face-showbtn">
                    <span>展示</span>
                </div>
                <div class="face-sina-body">
                    <ul class="face-sina-items face-sina-items-show">
                    </ul>
                </div>
            </div>
    </div>
    <div class="face-show-box">
    </div>
</div>

• 給頁面表情列表賦值

var self = this;
var html = '';
 for(var i = 0;i<self.faceList.length;i++){
     var item = self.faceList[i];
     html +=' <li class="face-sina-item"  data-title="'+item.title+'"><img src="img/face/'+item.url+'" alt=""></li>'
 }
 $('.face-sina-items').html(html);

• 輸入框內展示選擇內容：通過點擊選擇事件獲取當前表情包的title 并賦值給到頁面的輸入框內

  $('.face-sina-item').on('click',function(){
        var title = $(this).data("title");
        var textInner = $('textarea[name="face"]').val();
                textInner+="["+title+"]";
        $('textarea[name="face"]').val(textInner);
 });

image.png

• 數據解析轉換成表情包

$('.face-showbtn').on('click',function(){
        var cont =  $('textarea[name="face"]').val();
        var pat01 = /\[[\u4e00-\u9fa5]+\]/g;
        var pat02 = /\[[\u4e00-\u9fa5]+\]/;
        var content = cont.match(pat01);
        var str = cont;
        if(content){
            for(var i=0;i<content.length;i++){
                for(var j=0;j<self.faceList.length;j++){
                    if("["+self.faceList[j].title +"]" == content[i]){
                        var src = self.faceList[j].url;
                        break;
                    }
                }
                str = str.replace(pat02,'<img src="img/face/'+src+'"/>');
            }
        }
        $('.face-show-box').html(str).show();
    })

image.png

• 如需看完整的版本，可以查看源代碼 https://github.com/Aimee1608/jqueryEmoji