巧用replace將文字表情替換為圖片
更新時間:2014年04月17日 15:31:44 作者:
選擇表情插入文本域的時候,顯示的是類似[哈哈]這樣的字符串,下面是把表情字符串轉換為圖片表情的一種方法
微博或者論壇上常見的效果,選擇表情插入文本域的時候,顯示的是類似[哈哈]這樣的字符串,下面是把表情字符串轉換為圖片表情的一種方法
<div id="test">abc</div>
var face ={'[哈哈]':'<img src="images/face/haha.gif" alt="" />','[流汗]':'<img src="images/face/liuhan.gif" alt="" />'} //完整的qq表情見本文末尾
var reg = /\[.+?\]/g;
var str = '[哈哈]abc[流汗][流汗]'; //這里是獲取到的文本域的value,簡潔起見,直接使用了字符串。
str = str.replace(reg,function(a,b){
return face[a];
});
document.getElementById('test').innerHTML = str;
qq表情包及對應face對象:http://pan.baidu.com/s/1qWPQbBu
復制代碼 代碼如下:
<div id="test">abc</div>
復制代碼 代碼如下:
var face ={'[哈哈]':'<img src="images/face/haha.gif" alt="" />','[流汗]':'<img src="images/face/liuhan.gif" alt="" />'} //完整的qq表情見本文末尾
var reg = /\[.+?\]/g;
var str = '[哈哈]abc[流汗][流汗]'; //這里是獲取到的文本域的value,簡潔起見,直接使用了字符串。
str = str.replace(reg,function(a,b){
return face[a];
});
document.getElementById('test').innerHTML = str;
qq表情包及對應face對象:http://pan.baidu.com/s/1qWPQbBu
您可能感興趣的文章:
- Android開發(fā)技巧之像QQ一樣輸入文字和表情圖像
- 基于Android開發(fā)支持表情的實現(xiàn)詳解
- javascript控制在光標位置插入文字適合表情的插入
- jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法
- 基于jQuery實現(xiàn)的QQ表情插件
- Android編程實現(xiàn)QQ表情的發(fā)送和接收完整實例(附源碼)
- 使MySQL能夠存儲emoji表情字符的設置教程
- Android編程開發(fā)實現(xiàn)TextView顯示表情圖像和文字的方法
- Android編程開發(fā)之EditText實現(xiàn)輸入QQ表情圖像的方法
- iOS組件封裝與自動布局自定義表情鍵盤
相關文章
bootstrap精簡教程_動力節(jié)點Java學院整理
這篇文章主要介紹了bootstrap精簡教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07關于javascript中限定時間內防止按鈕重復點擊的思路詳解
下面小編就為大家?guī)硪黄P于javascript中限定時間內防止按鈕重復點擊的思路詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08js控制臺報錯Uncaught TypeError: Cannot read p
本文主要介紹了js控制臺報錯Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07js如何使用Pagination+PageHelper實現(xiàn)分頁
本文主要介紹了js如何使用Pagination+PageHelper實現(xiàn)分頁,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06用Javascript實現(xiàn)錨點(Anchor)間平滑跳轉
本文介紹的方法,實現(xiàn)了錨點(Anchor)間平滑跳轉,效果非常不錯。2009-09-09