Javascript string.replace(regex,callback)高效表情替换模块实现

笔者在公司的项目中需要开发一个自定义表情模块效果图如下：

其javascript问题实现如下:

/** * Emoji Module * @fileOverview emoji * @author Collin */



/// <reference path="../jquery-1.7.2-vsdoc.js" />



var emoji = { url: 'xxx', icons: ["/惊讶/", "/撇嘴/", "/色/", "/发呆/", "/得意/", "/流泪/", "/害羞/", "/闭嘴/", "/睡/", "/大哭/", "/尴尬/", "/发怒/", "/调皮/", "/呲牙/", "/微笑/", "/难过/", "/酷/", "/生病/", "/抓狂/", "/吐/", "/偷笑/", "/可爱/", "/白眼/", "/傲慢/", "/饥饿/", "/困/", "/惊恐/", "/流汗/", "/憨笑/", "/大兵/", "/奋斗/", "/咒骂/", "/疑问/", "/嘘/", "/晕/", "/折磨/", "/衰/", "/骷髅/", "/敲打/", "/再见/", "/猪/", "/猫/", "/狗/", "/拥抱/", "/钱/", "/灯泡/", "/冰激凌/", "/蛋糕/", "/闪电/", "/炸弹/", "/刀/", "/足球/", "/音符/", "/大便/", "/咖啡/", "/米饭/", "/药/", "/玫瑰/", "/枯萎/", "/示爱/", "/心跳/", "/桌子/", "/握手/", "/礼物/", "/电话/", "/时钟/", "/邮件/", "/电视/", "/太阳/", "/月亮/", "/强/", "/弱/", "/握手/", "/耶/", "/兔子/", "/美女/", "/小孩/", "/帅哥/", "/酒/", "/可乐/"], parse: function (content) { if (content == null || content == '') return; for (var i = 0; i < 80; i++) { var regex = new RegExp(this.icons[i], "g"); var img = "<img src=\"" + this.url + i + ".gif\" />"; content = content.replace(regex, img); } return content; }, setup: function (ctlOutput, ctlBind, ctlContainer, direction) { /*加载表情*/

        var timeoutHandler = 0, allEmojis = '', borderClass = ''; for (var i = 0; i < 80; i++) { borderClass = ''; if (i % 10 == 9 && i != 0) borderClass = "emoji-right"; if (i > 69) borderClass = "emoji-bottom"; if (i == 79) borderClass = "emoji-bottom emoji-right"; allEmojis += "<div data-exta=\"" + this.icons[i] + "\" class=\"emoji " + borderClass + "\" style=\" background-image:url(" + this.url + i + ".gif);\"></div>"; } $(ctlContainer).html(allEmojis); $(ctlContainer).on("click", "div", null, function () { $(ctlOutput).val($(ctlOutput).val() + $(this).attr("data-exta")); //$(ctlOutput).focus();

 $(ctlContainer).hide(); }); $(ctlBind).click(function () { switch (direction) { case "bottom": { $(ctlContainer).css({ position: 'absolute', bottom: (0 - $(ctlContainer).height()) + 'px', left: 0 }).show(); break; } case "top": { $(ctlContainer).css({ position: 'absolute', bottom: $(this).height()+"px", left: 0 }).show(); break; } } }).mouseleave(function () { timeoutHandler = window.setTimeout(function () { $(ctlContainer).hide(); }, 600); }); $(ctlContainer).mouseleave(function () { $(this).hide(); }).mouseover(function () { window.clearTimeout(timeoutHandler); }); } };

上述实现其parse方法时间复杂度过高, 在转换大文本时会执行无效循环, 笔者在看javascript Regex 和 string.replace其正则替换支持回调处理匹配结果

reference:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace

改进后的parse 如下：

parse: function (content) {

        if (content == null || content == '') return;

        var regex = new RegExp(this.icons.join('|'), 'g');

        var that = this;

        return content.replace(regex, function (match) {

            var index = that.icons.indexOf(match);

            if (index < 0) return match;

            return '<img src="' + that.url + index + '.gif" />'

        });



    }