巧用replace将文字表情替换为图片


Posted in Javascript onApril 17, 2014

微博或者论坛上常见的效果,选择表情插入文本域的时候,显示的是类似[哈哈]这样的字符串,下面是把表情字符串转换为图片表情的一种方法

<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
Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
JavaScript事件委托的技术原理探讨示例
Apr 17 #Javascript
JS实现div居中示例
Apr 17 #Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 #Javascript
在JS中解析HTML字符串示例代码
Apr 16 #Javascript
You might like
Smarty中的注释和截断功能介绍
2015/04/09 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
javascript实现拖放效果
2015/12/16 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
python海龟绘图实例教程
2014/07/24 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python将unicode转为str的方法
2017/06/21 Python
python数据结构之链表详解
2017/09/12 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
解读python如何实现决策树算法
2018/10/11 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python 实现简单的客户端认证
2020/07/29 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
装修施工安全责任书
2014/07/24 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技