巧用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 Cookie 直接浏览网站分网址
Dec 08 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Django admin美化插件suit使用示例
2017/12/12 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python同步两个文件夹下的内容
2019/08/29 Python
PHP统计代码行数的小代码
2019/09/19 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
称象教学反思
2014/02/03 职场文书
宿舍标语大全
2014/06/19 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python