巧用replace將文字表情替換為圖片
更新時(shí)間：2014年04月17日 15:31:44 作者：
選擇表情插入文本域的時(shí)候，顯示的是類似[哈哈]這樣的字符串，下面是把表情字符串轉(zhuǎn)換為圖片表情的一種方法
微博或者論壇上常見的效果，選擇表情插入文本域的時(shí)候，顯示的是類似[哈哈]這樣的字符串，下面是把表情字符串轉(zhuǎn)換為圖片表情的一種方法
<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表情包及對應(yīng)face對象：http://pan.baidu.com/s/1qWPQbBu
復(fù)制代碼 代碼如下:
<div id="test">abc</div>
復(fù)制代碼 代碼如下:
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表情包及對應(yīng)face對象：http://pan.baidu.com/s/1qWPQbBu
您可能感興趣的文章:
- Android開發(fā)技巧之像QQ一樣輸入文字和表情圖像
- 基于Android開發(fā)支持表情的實(shí)現(xiàn)詳解
- javascript控制在光標(biāo)位置插入文字適合表情的插入
- jQuery實(shí)現(xiàn)在textarea指定位置插入字符或表情的方法
- 基于jQuery實(shí)現(xiàn)的QQ表情插件
- Android編程實(shí)現(xiàn)QQ表情的發(fā)送和接收完整實(shí)例(附源碼)
- 使MySQL能夠存儲emoji表情字符的設(shè)置教程
- Android編程開發(fā)實(shí)現(xiàn)TextView顯示表情圖像和文字的方法
- Android編程開發(fā)之EditText實(shí)現(xiàn)輸入QQ表情圖像的方法
- iOS組件封裝與自動布局自定義表情鍵盤
相關(guān)文章
reduce()方法對數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下2023-08-08
微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能示例
這篇文章主要介紹了微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能,結(jié)合實(shí)例形式分析了微信小程序自定義頂部TabBar選項(xiàng)卡頁面切換功能的相關(guān)布局、樣式及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級
原來是由于IE瀏覽器以及Firefox對于冒泡型事件的支持層次不同造成的。（如對冒泡事件不是很了解可先查詢相關(guān)資料）2010-10-10
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 表格與按鈕功能，感興趣的朋友參考下吧2016-04-04
JS實(shí)現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式，并且支持翻頁預(yù)覽、以及圖片打包下載，文中的示例代碼簡潔易懂，需要的可以參考一下2023-05-05
記得meta標(biāo)簽當(dāng)中有一個(gè)refresh的功能嗎？這是讓瀏覽的頁面刷新并可以轉(zhuǎn)到相應(yīng)的頁面，如果刷新本頁的話就會造成重復(fù)的刷新，現(xiàn)在我們就試試用腳本來實(shí)現(xiàn)只讓頁面刷新一次.2009-07-07
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。下面通過本文給大家介紹Bootstrap 輪播(Carousel)插件，非常不錯(cuò)，需要的朋友參考下吧2016-12-12
這篇文章主要為大家介紹了JavaScript之String常見的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了支持移動端原生js輪播圖的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02