巧用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 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 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
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
js获取height和width的方法说明
2013/01/06 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python制作简单五子棋游戏
2019/06/18 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
护理不良事件检讨书
2014/02/06 职场文书
员工考核评语大全
2014/04/26 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
家庭教育的心得体会
2014/09/01 职场文书
大学生简短的自我评价
2014/09/12 职场文书
大学军训心得体会800字
2016/01/11 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python