巧用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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 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
神族 Protoss 历史背景
2020/03/14 星际争霸
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
python装饰器使用方法实例
2013/11/21 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
使用python分析git log日志示例
2014/02/27 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python安装与使用redis的方法
2016/04/19 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python命令行参数用法实例分析
2019/06/25 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
pandas 数据类型转换的实现
2020/12/29 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
教师绩效考核方案
2014/01/21 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle