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" />'
        });

    }