巧用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 位置插件
Dec 25 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
React自定义hook的方法
Jun 25 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处理换行符的问题 \r\n
2013/06/13 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
python3对接mysql数据库实例详解
2019/04/30 Python
Python实现FM算法解析
2019/06/18 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年党委工作总结
2014/11/22 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
python 单机五子棋对战游戏
2022/04/28 Python