巧用replace将文字表情替换为图片

微博或者论坛上常见的效果，选择表情插入文本域的时候，显示的是类似[哈哈]这样的字符串，下面是把表情字符串转换为图片表情的一种方法


代码如下:

<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

赞 (0)

相关推荐

  • 使MySQL能够存储emoji表情字符的设置教程

    MySQL 需要支持 emoji 表情符号版本需要大于5.5.3,且字符集需要设置为utf8mb4 字符集. utf8mb4和utf8到底有什么区别呢?原来以往的mysql的utf8一个字符最多3字节,而utf8mb4则扩展到一个字符最多能有4字节,所以能支持更多的字符集. 将Mysql的编码从utf8转换成utf8mb4. 需要 >= MySQL 5.5.3版本.从库也必须是5.5的了.低版本不支持这个字符集.复制报错 停止MySQL Server服务 修改 my.cnf或者mysql.ini

  • iOS组件封装与自动布局自定义表情键盘

    iOS组件封装与自动布局自定义表情键盘

    下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自定义表情键盘肿么这么麻烦?下面 将会介绍我们如何用上面提到的东西来定义我们的表情键盘的.下面的内容会比较多,这篇文章还是比较有料的. 还是那句话写技术博客是少不了代码的,下面会结合代码来回顾一下iOS的知识,本篇博文中用到的知识点在前面的博客中都能找到相应的内容,本篇 算是一个小小的功能整合.先来张

  • Android开发技巧之像QQ一样输入文字和表情图像

    Android开发技巧之像QQ一样输入文字和表情图像

    EditText和TextView一样,也可以进行图文混排.所不同的是,TextView只用于显示图文混排效果,而EditText不仅可显示,也可混合输入文字和图像,让我们先回顾一下图5.2所示的QQ聊天输入框,在输入框中可以同时输入文字和表情图像.实际上,这种效果在Android SDK中只需要几行代码就可以实现.为了使读者更有学习的冲动,先来欣赏一下即将实现的效果,如图5.16所示. 图5.16 在EditText控件中输入文字和图像 为了实现这个程序,首先来准备一些要用到的素材,也就是要在

  • Android编程开发实现TextView显示表情图像和文字的方法

    Android编程开发实现TextView显示表情图像和文字的方法

    本文实例讲述了Android编程开发实现TextView显示表情图像和文字的方法.分享给大家供大家参考,具体如下: 从这个案例中我们可以学到当我们美化图片美化界面的时候可以在某一区域输入图片和文字混搭信息,第三张图片按比例缩小,第四张图像有超链接 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro

  • jQuery实现在textarea指定位置插入字符或表情的方法

    本文实例讲述了jQuery实现在textarea指定位置插入字符或表情的方法.分享给大家供大家参考.具体实现方法如下: 1. 函数定义 复制代码 代码如下: (function($){     $.fn.extend({         insertAtCaret: function(myValue){             var $t=$(this)[0];             if (document.selection) {                 this.focus()

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • Android编程实现QQ表情的发送和接收完整实例(附源码)

    Android编程实现QQ表情的发送和接收完整实例(附源码)

    本文实例讲述了Android编程实现QQ表情的发送和接收.分享给大家供大家参考,具体如下: 在自己做一个聊天应用练习的时候,需要用到表情,于是就想着模仿一下QQ表情,图片资源完全copy的QQ.apk,解压就可以得到,这里不细说. 下面将该应用中的表情模块功能抽离出来,以便自己以后复习回顾.. 先看一下效果图: 首先进入界面:(完全仿照QQ) 点击一下上面的表情图标: 选择一些表情,输入一些文字混合: 点击发送: 可以看到文字和表情图片都一起显示出来了. 下面列出一些关键代码: 表情工具类Exp

  • 基于Android开发支持表情的实现详解

    最近项目需要支持表情,表情的添加和解析实现基本上是参照Android自身的SmileyParser,具体就不多讲了,直接贴上代码: 复制代码 代码如下: public class SmileyParser {private static SmileyParser sInstance = null; private Context mContext = null;private Pattern mPattern = null;private HashMap<String, Integer> mS

  • 基于jQuery实现的QQ表情插件

    基于jQuery实现的QQ表情插件

    不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

  • Android编程开发之EditText实现输入QQ表情图像的方法

    Android编程开发之EditText实现输入QQ表情图像的方法

    本文实例讲述了Android编程开发之EditText实现输入QQ表情图像的方法.分享给大家供大家参考,具体如下: 实现效果如下: 将QQ表情图像放到res下的drawable-hdpi文件夹下: 布局文件: <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:

随机推荐