用正则表达式将文字转换成表情图片

比如最常见的表情符号:),如果用图片表示的话就是

这种转换的背后需要一种映射关系,需要由代码完成解析工作,在网页聊天中非常常见,这里贴一下部分核心代码,在

使用ExtJS实现的WebQQ聊天(仿Lync界面)

中使用到


Ext.define('Tulip.messenger.SmileyParser',{
    mixins: {
        observable: 'Ext.util.Observable'
    },singleton: true,re: RegExp("(:\\-?\\)|:\\-?\\}|:\\-?\\]|:\\-\\\\|;\\-?\\\\|:\\-?[Ss]|:\\-?\\||:'\\-?\\||:\\-?[\\(<]|:\\-?[Dd>]|<:o\\)|<[oO]\\)|:\\-?[oO]|:\\-?[pP]|:\\-?\\[|:'\\(|:\\-?@|;\\-?@|:\\-?\\$|:\\-#|:\\-\\*|:\\^\\)|;\\-?\\)|8o\\||8\\-\\)|8\\-\\||\\^o\\)|\\*\\-\\)|\\*\\-?\\\\|\\*\\-?\\||\\+o\\(|\\|\\-\\)|\\([a-pA-Pr-vR-VwWx-zX-Z]\\)|\\([~\\\\*068@#&\\^\\{\\}]\\)|\\(\\|\\|\\)|\\('\\.'\\)|\\*p\\*|\\*s\\*|<3|:8\\)|\\r\\n|\\r|\\n|((http|https):\\/\\/|\\/www|www\\.)[^\\s]*[^\\s?.!(;:'>\\[\\],])"),descriptors: [ // Matrix 8 (Row) * 10 (Column)
        /** 0 ~ 9 **/
        {name:'Smiley',code:':)'},{name:'Open-mouthed smiley',code:':d'},{name:'Winking smiley',code:';)'},{name:'Surprised smiley',code:':-o'},{name:'Smiley with tongue out',code:':p'},{name:'Hot smiley',code:'(h)'},{name:'Angry smiley',code:':@'},{name:'Confused smiley',code:':s'},{name:'Embarrassed smiley',code:':$'},{name:'Sad smiley',code:':('},/** 10 ~ 19 **/
        {name:'Crying face',code:':’('},{name:'Disappointed Smiley',code:':|'},{name:'Storm cloud',code:'(st)'},{name:'Baring teeth smiley',code:':o8'},{name:'Nerd smiley',code:'8-|'},{name:'Sick smiley',code:'+o('},{name:'Party smiley',code:'<:o)'},{name:'Sleepy smiley',code:'(s)'},{name:'Thinking smiley',code:'*-)'},{name:'Don’t tell anyone smiley',code:':-#'},/** 20 ~ 29 **/
        {name:'Secret telling smiley',code:':-*'},{name:'Sarcastic smiley',code:'^o)'},{name:'Eye-rolling smiley',code:'8-)'},{name:'Red heart',code:'(l)'},{name:'Broken heart',code:'(u)'},{name:'Drinks',code:'(d)'},{name:'Beer',code:'(b)'},{name:'Cat face',code:'(@)'},{name:'Dog face',code:'(&)'},{name:'Snail',code:'(sn)'},/** 30 ~ 39 **/
        {name:'Black sheep',code:'(bah)'},{name:'Sleeping half-moon',{name:'Star',code:'(*)'},{name:'Sun',code:'(#)'},{name:'Rainbow',code:'(r)'},{name:'Left hug',code:'({)'},{name:'Right hug',code:'(})'},{name:'Red lips',code:'(k)'},{name:'Red rose',code:'(f)'},{name:'Wilted rose',code:'(w)'},/** 40 ~ 49 **/
        {name:'Clock',code:'(o)'},{name:'Gift box with bow',code:'(g)'},{name:'Birthday cake',code:'(^)'},{name:'Camera',code:'(p)'},{name:'Lightbulb',code:'(i)'},{name:'Coffee cup',code:'(c)'},{name:'Telephone receiver',code:'(t)'},{name:'Mobile phone',code:'(mp)'},{name:'Auto',code:'(au)'},{name:'Airplane',code:'(ap)'},/** 50 ~ 59 **/
        {name:'Computer',code:'(co)'},{name:'Money',code:'(mo)'},{name:'Filmstrip',code:'(~)'},{name:'Music Note',code:'(8)'},{name:'Pizza',code:'(pi)'},{name:'Soccer',code:'(so)'},{name:'Email icon',code:'(e)'},{name:'Boy',code:'(z)'},{name:'Girl',code:'(x)'},{name:'Island with palm tree',code:'(ip)'},/** 60 ~ 69 **/
        {name:'Umbrella',code:'(um)'},{name:'It’s a deal',code:'(ok)'},{name:'Stop',code:'(!)'},{name:'Confidential/key',code:'(qt)'},{name:'Let’s meet',code:'(s+)'},{name:'I agree',code:'(y)'},{name:'I disagree',code:'(n)'},{name:'Can you talk',code:'(!!)'},{name:'Bye',code:'(bye)'},{name:'Working from home',code:'(@h)'},/** 70 ~ 79 **/
        {name:'Hold on',code:'(w8)'},{name:'Good luck',code:'(gl)'},{name:'Can I call you?',code:'(cic)'},{name:'Online',code:'(ol)'},{name:'Busy',code:'(busy)'},{name:'Do Not Disturb',code:'(dnd)'},{name:'Working on it',code:'(woi)'},{name:'What’s going on?',code:'(!!?)'},{name:'Gotta run',code:'(gtr)'},{name:'Games',code:'(ply)'}
    ],smileyIconMap: {},constructor: function(config) {
        var me = this;
        
        me.mixins.observable.constructor.call(me,config);
        
        me.initSmileyMap();
    },replaceEmoticons: function(text,outText) {
        this.translate(text,outText,false)
    },/*
     * 把代码换成图片;创建超链接
     */
    translate: function(text,link,type) {
        var me = this; //,outText = [];
        for (; 0 < text.length;) {
            var end = false;
            text.replace(me.re,function(matched,g,h,i,j) {
                0 < j && (matched = text.substring(0,j),outText.push(matched));
                switch (g) {
                case "\r\n":
                case "\r":
                case "\n":
                    outText.push("<br>");
                    break;
                default:
                    g.substr(0,4)=="http" || g.substr(0,3)=="www" ? 
                        link ? 
                            (matched = me.createLink(g,outText),outText.push(matched)) : outText.push(g) : g.substr(0,4)=="/www" ? outText.push(g) : (matched = me.createSmiley(g,type),null == matched ? outText.push(g) : outText.push(matched))
                }
                text = text.substring(j + g.length);
                end = true;
                return ''
            });
            end || (outText.push(text),text = '')
        }
    },createLink: function(url,outText) {
        var urlName = url;
        outText.push('<a href="');
        url.substr(0,7)!="http://" && url.substr(0,8)!="https://" && (url = "http://" + url);
        outText.push(url,'" target=_blank>',urlName,'</a>');
    },createSmiley: function(code) {
        var me = this,imgHtml = [],imgName = me.smileyIconMap[code.toLowerCase()];
        if (imgName == null || imgName == undefined) return null;
        imgHtml.push('<img class="face" width="19" height="19" title="Rainbow (r)" alt="(r)" src="/tulip/resources/images/lync/smiley/',imgName,'.gif">');
        
        return imgHtml.join('')
    },initSmileyMap: function() {
        var me = this;
        
        me.smileyIconMap[":)"] = me.smileyIconMap[":-)"] = "1";
        me.smileyIconMap[":d"] = me.smileyIconMap[":-d"] = me.smileyIconMap[":>"] = me.smileyIconMap[":->"] = "2";
        me.smileyIconMap[";)"] = me.smileyIconMap[";-)"] = "3";
        me.smileyIconMap[":o"] = me.smileyIconMap[":-o"] = "4";
        me.smileyIconMap[":p"] = me.smileyIconMap[":-p"] = "5";
        me.smileyIconMap["(h)"] = "6";
        me.smileyIconMap[":@"] = me.smileyIconMap[":-@"] = "7";
        me.smileyIconMap[":$"] = me.smileyIconMap[":-$"] = me.smileyIconMap[":s"] = me.smileyIconMap[":-s"] = "8";
        me.smileyIconMap[":("] = me.smileyIconMap[":-("] = me.smileyIconMap[":<"] = me.smileyIconMap[":-<"] = "9";
        me.smileyIconMap[":'("] = "10";
        me.smileyIconMap[":|"] = me.smileyIconMap[":-|"] = "11";
        me.smileyIconMap["(6)"] = "12";
        me.smileyIconMap["(a)"] = "13";
        me.smileyIconMap["(l)"] = me.smileyIconMap["<3"] = "14";
        me.smileyIconMap["(u)"] = "15";
        me.smileyIconMap["(@)"] = "16";
        me.smileyIconMap["(&)"] = "17";
        me.smileyIconMap["(s)"] = "18";
        me.smileyIconMap["(*)"] = "19";
        me.smileyIconMap["(~)"] = "20";
        me.smileyIconMap["(8)"] = "21";
        me.smileyIconMap["(e)"] = "22";
        me.smileyIconMap["(f)"] = "23";
        me.smileyIconMap["(w)"] = "24";
        me.smileyIconMap["(o)"] = me.smileyIconMap["(0)"] = "25";
        me.smileyIconMap["(k)"] = "26";
        me.smileyIconMap["(g)"] = "27";
        me.smileyIconMap["(^)"] = "28";
        me.smileyIconMap["(p)"] = "29";
        me.smileyIconMap["(i)"] = "30";
        me.smileyIconMap["(c)"] = "31";
        me.smileyIconMap["(t)"] = "32";
        me.smileyIconMap["({)"] = "33";
        me.smileyIconMap["(})"] = "34";
        me.smileyIconMap["(b)"] = "35";
        me.smileyIconMap["(d)"] = "36";
        me.smileyIconMap["(z)"] = "37";
        me.smileyIconMap["(x)"] = "38";
        me.smileyIconMap["(y)"] = "39";
        me.smileyIconMap["(n)"] = "40";
        me.smileyIconMap["(ok)"] = "62";
    }
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


jquery.validate使用攻略(表单校验) 目录 jquery.validate使用攻略1 第一章&#160;jquery.validate使用攻略1 第二章&#160;jQuery.validate.js API7 Custom selectors7 Utilities8 Validato
/\s+/g和/\s/g的区别 正则表达式/\s+/g和/\s/g,目的均是找出目标字符串中的所有空白字符,但两者到底有什么区别呢? 我们先来看下面一个例子: let name = &#39;ye wen jun&#39;;let ans = name.replace(/\s/g, &#39;&#3
自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母 /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod(&quot;letters&quot;, function (value, element) { return this.optio
this.optional(element)的用法 this.optional(element)是jquery.validator.js表单验证框架中的一个函数,用于表单控件的值不为空时才触发验证。 简单来说,就是当表单控件值为空的时候不会进行表单校验,此函数会返回true,表示校验通过,当表单控件
jQuery.validate 表单动态验证 实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码 )。 也可
自定义验证之这能输入数字(包括小数 负数 ) &lt;script type=&quot;text/javascript&quot;&gt; function onlyNumber(obj){ //得到第一个字符是否为负号 var t = obj.value.charAt(0); //先把非数字的都
// 引入了外部的验证规则 import { validateAccountNumber } from &quot;@/utils/validate&quot;; validator.js /*是否合法IP地址*/ export function validateIP(rule, value,cal
VUE开发--表单验证(六十三) 一、常用验证方式 vue 中表单字段验证的写法和方式有多种,常用的验证方式有3种: data 中验证 表单内容: &lt;!-- 表单 --&gt; &lt;el-form ref=&quot;rulesForm&quot; :rules=&quot;formRul
正则表达式 座机的: 例子: 座机有效写法: 0316-8418331 (010)-67433539 (010)67433539 010-67433539 (0316)-8418331 (0316)8418331 正则表达式写法 0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d
var reg = /^0\.[1-9]{0,2}$/;var linka = 0.1;console.log (reg.test (linka)); 0到1两位小数正则 ^(0\.(0[1-9]|[1-9]{1,2}|[1-9]0)$)|^1$ 不含0、0.0、0.00 // 验证是否是[1-10
input最大长度限制问题 &lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; //可以 &lt;input type=&quot;number&quot; maxlength=&quot;5&quot; /&gt; //没有效
js输入验证是否为空、是否为null、是否都是空格 目录 1.截头去尾 trim 2.截头去尾 会去掉开始和结束的空格,类似于trim 3.会去掉所有的空格,包括开始,结束,中间 1.截头去尾 trim str=str.trim(); // 强烈推荐 最常用、最实用 or $.trim(str);
正则表达式语法大全 字符串.match(正则):返回符合的字符串,若不满足返回null 字符串.search(正则):返回搜索到的位置,若非一个字符,则返回第一个字母的下标,若不匹配则返回-1 字符串.replace(正则,新的字符串):找到符合正则的内容并替换 正则.test(字符串):在字符串中
正整数正则表达式正数的正则表达式(包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+\d)|0)$正数的正则表达式(不包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+
JS 正则验证 test() /*用途:检查输入手机号码是否正确输入:s:字符串返回:如果通过验证返回true,否则返回false /function checkMobile(s){var regu =/[1][3][0-9]{9}$/;var re = new RegExp(regu);if (r
请输入保留两位小数的销售价的正则: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ 1.只能输入英文 &lt;input type=&quot;text&quot; onkeyup=&quot;value
判断价格的正则表达式 价格的正则表达式 /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; 1 解析:价格符合两种格式 ^ [1-9]\d*(.\d{1,2})?$ : 1-9 开头,后跟是 0-9,可以跟小数点,但小数点后要带上 1-2 位小数,类似 2,2
文章浏览阅读106次。这篇文章主要介绍了最实用的正则表达式整理,比如校验邮箱的正则,号码相关,数字相关等等,本文给大家列举的比较多,需要的朋友可以参考下。_/^(?:[1-9]d*)$/ 手机号
文章浏览阅读1.2k次。4、匹配中的==、an==、== an9、i9 == "9i"和99p==请注意下面这部分的作用,它在匹配中间内容的时候排除了说明:当html字符串如下时,可以匹配到两处,表示匹配的字符串不包含and且不包含空白字符。说明:在上面的正则表达式中,_gvim正则表达式匹配不包含某个字符串
文章浏览阅读897次。【代码】正则表达式匹配a标签的href。_auto.js 正则匹配herf