nodeJs+jquery實現聊天插入表情功能
阿新 • • 發佈:2019-02-02
在實習期間做一個nodejs的專案時,分配了做一個聊天室的任務,然後就喜歡上了這個。。。想著而不只是聊天,還可以加入類似qq表情的功能。發現可以進入Jquery官方網站下載該demo,但是在運用的過程中,難免會遇到各種各樣的問題,在自己的資訊研究之下,終於實現了該功能。
官方demo下載:http://www.jq22.com/jquery-info365
問題解決:
1.瀏覽器判別問題:在官方檔案中,jquery還處於1.9以下,所有有句話在執行的過程中會出錯:if(!$.browser.msie) return;
上網搜尋會發現,這是判別瀏覽器的版本的,現在1.9以上的jquery外掛已經不支援該語句了,可以改換成:
if(!$.support.msie) return;
這樣就可以了。
2.在輸入框輸入表情之後會在聊天敞口資訊顯示,在textarea中現實的轉換的文字代號,那麼在顯示的聊天記錄裡面需要重新轉換為圖片,下面的一段程式碼就是轉換過程。
//檢視結果
function replace_em(str){
str = str.replace(/\</g,'<');
str = str.replace(/\>/g,'>');
str = str.replace(/\n/g,'<br/>');
str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');
return str;
}
下面一段程式碼是顯示在msgDiv中的,既是在點擊發送按鈕時的動作,其中sub_btn是按鈕的id,show是顯示的div的id,在實際應用中可以自己根據內容修改。
$(".sub_btn").click(function(){
var str = $("#saytext").val();
$("#show").html(replace_em(str));
});