巧用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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue实现登录拦截
Jun 29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JS原型对象操作实例分析
2020/06/06 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python的垃圾回收机制详解
2019/08/28 Python
Django发送邮件功能实例详解
2019/09/02 Python
python函数定义和调用过程详解
2020/02/09 Python
Pandas的数据过滤实现
2021/01/15 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
如何提高MySql的安全性
2014/06/19 面试题
专业销售业务员求职信
2013/11/18 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
商务代表岗位职责
2015/02/15 职场文书
开会通知短信大全
2015/04/20 职场文书
导游词之杭州西湖
2019/09/19 职场文书
golang slice元素去重操作
2021/04/30 Golang
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Redis入门基础常用操作命令整理
2022/06/01 Redis