javascript-replace

文档语法：

stringObject.replace(regexp/substr,replacement)

解释说明

第一个参数是RegExp对象或者字符串，第二个参数是字符串或者是函数，
常用的第二个参数是字符串，今天给web应用集成emoji，第二个参数用到了函数。
emoji集成方案有很多，我选用了jquery-emojigit地址

添加emoji表情

<textarea class="textarea thumbnail" id="textarea"></textarea>
 $().ready(function () {

        $("#textarea").emoji({
            showTab: true,
            animation: 'fade',
            icons: [{
                name: "贴吧表情",
                path: "dist/img/tieba/",
                maxNum: 50,
                file: ".jpg",
                placeholder: ":{alias}:",
                alias: {
                    1: "hehe",
                    2: "haha",
                    3: "tushe",
                    4: "a",
                    5: "ku",
                    6: "lu",
                    7: "kaixin",
                    8: "han",
                    9: "lei",
                    10: "heixian",
                    11: "bishi",
                    12: "bugaoxing",
                    13: "zhenbang",
                    14: "qian",
                    15: "yiwen",
                    16: "yinxian",
                    17: "tu",
                    18: "yi",
                    19: "weiqu",
                    20: "huaxin",
                    21: "hu",
                    22: "xiaonian",
                    23: "neng",
                    24: "taikaixin",
                    25: "huaji",
                    26: "mianqiang",
                    27: "kuanghan",
                    28: "guai",
                    29: "shuijiao",
                    30: "jinku",
                    31: "shengqi",
                    32: "jinya",
                    33: "pen",
                    34: "aixin",
                    35: "xinsui",
                    36: "meigui",
                    37: "liwu",
                    38: "caihong",
                    39: "xxyl",
                    40: "taiyang",
                    41: "qianbi",
                    42: "dnegpao",
                    43: "chabei",
                    44: "dangao",
                    45: "yinyue",
                    46: "haha2",
                    47: "shenli",
                    48: "damuzhi",
                    49: "ruo",
                    50: "OK"
                },
                title: {
                    1: "呵呵",
                    2: "哈哈",
                    3: "吐舌",
                    4: "啊",
                    5: "酷",
                    6: "怒",
                    7: "开心",
                    8: "汗",
                    9: "泪",
                    10: "黑线",
                    11: "鄙视",
                    12: "不高兴",
                    13: "真棒",
                    14: "钱",
                    15: "疑问",
                    16: "阴脸",
                    17: "吐",
                    18: "咦",
                    19: "委屈",
                    20: "花心",
                    21: "呼~",
                    22: "笑脸",
                    23: "冷",
                    24: "太开心",
                    25: "滑稽",
                    26: "勉强",
                    27: "狂汗",
                    28: "乖",
                    29: "睡觉",
                    30: "惊哭",
                    31: "生气",
                    32: "惊讶",
                    33: "喷",
                    34: "爱心",
                    35: "心碎",
                    36: "玫瑰",
                    37: "礼物",
                    38: "彩虹",
                    39: "星星月亮",
                    40: "太阳",
                    41: "钱币",
                    42: "灯泡",
                    43: "茶杯",
                    44: "蛋糕",
                    45: "音乐",
                    46: "haha",
                    47: "胜利",
                    48: "大拇指",
                    49: "弱",
                    50: "OK"
                }
            }, {
                path: "dist/img/qq/",
                name: "qq表情",
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif",
                placeholder: "#qq_{alias}#"
            }]
        });


//        $("#textarea").emoji({
//            button: "#btn",
//            showTab: false,
//            animation: 'slide',
//            icons: [{
//                name: "QQ表情",
//                path: "dist/img/qq/",
//                maxNum: 91,
//                excludeNums: [41, 45, 54],
//                file: ".gif"
//            }]
//        });
    })

emoji表情解析
虽然有官方的解析方法，自己写了个

 //放到全局变量 避免重复定义
        var alias = {
            1: "hehe",
            2: "haha",
            3: "tushe",
            4: "a",
            5: "ku",
            6: "lu",
            7: "kaixin",
            8: "han",
            9: "lei",
            10: "heixian",
            11: "bishi",
            12: "bugaoxing",
            13: "zhenbang",
            14: "qian",
            15: "yiwen",
            16: "yinxian",
            17: "tu",
            18: "yi",
            19: "weiqu",
            20: "huaxin",
            21: "hu",
            22: "xiaonian",
            23: "neng",
            24: "taikaixin",
            25: "huaji",
            26: "mianqiang",
            27: "kuanghan",
            28: "guai",
            29: "shuijiao",
            30: "jinku",
            31: "shengqi",
            32: "jinya",
            33: "pen",
            34: "aixin",
            35: "xinsui",
            36: "meigui",
            37: "liwu",
            38: "caihong",
            39: "xxyl",
            40: "taiyang",
            41: "qianbi",
            42: "dnegpao",
            43: "chabei",
            44: "dangao",
            45: "yinyue",
            46: "haha2",
            47: "shenli",
            48: "damuzhi",
            49: "ruo",
            50: "OK"
        };
        var arr = [];
        for (var i in alias) {
            if (alias.hasOwnProperty(i)) { //filter,只输出man的私有属性
                arr[alias[i]] = i;
            }
            ;
        }


        var reg = new RegExp(/\:(\w+)\s*\:/);
        var reg2 = new RegExp(/\#qq_(\d+)\s*\#/);

        function parseContent(content) {
            if (reg.test(content)) {
                var content1 = content.replace(/\:(\w+)\s*\:/, function (wd, s1) {
                    return "<img style='width: 30px;height: 30px;' src='dist/img/tieba/" + arr[s1] + ".jpg'>";
                });


                return parseContent(content1);
            }
            else if (reg2.test(content)) {
                var content1 = content.replace(/\#qq_(\d+)\s*\#/, function (wd, s1) {
                    console.log(wd + "+" + s1);
                    return "<img style='width: 30px;height: 30px;' src='dist/img/qq/" + s1 + ".gif'>";
                });


                return parseContent(content1);
            }
            else {
                return content;
            }
        }

 var content1 = content.replace(/\#qq_(\d+)\s*\#/, function (wd, s1) {
                    console.log(wd + "+" + s1);
                    return "<img style='width: 30px;height: 30px;' src='dist/img/qq/" + s1 + ".gif'>";
                });

其中

replacement参数使用函数的话第一个参数是匹配的字符串，第二个第三个是如果正则使用\s匹配的元素，这里有正则的知识复习了一下\s，贪婪模式等。