巧用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 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js数组操作学习总结
Nov 04 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
前端性能优化建议
Sep 17 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
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
再次研究下cache_lite
2007/02/14 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
js 学习笔记(三)
2009/12/29 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript知识点整理
2015/12/09 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
JSF界面控制层技术
2013/06/17 面试题
回门宴答谢词
2014/01/13 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android