用javascript在web上的表情符号

时间:2017-04-28 14:01:24

标签: javascript emoji

我正在聊天,我想添加表情符号支持。

var emoji = " :a :b :c :( :d :O :e :f :D :g :L :l :m :^ :* :v :) :# :p := :o :; :r :x :1 :2 :3";
var emoticons = {
':a'  :  '<img src="emotions-fb/angel.png" title="angel" alt=":a" class="embtn"/>',
':b'  :  '<img src="emotions-fb/apple.png" title="apple" alt=":b" class="embtn"/>',
':c'  :  '<img src="emotions-fb/confused.png" title="confused" alt=":c" class="embtn"/>',
':('  :  '<img src="emotions-fb/cry.png" title="cry" alt=":(" class="embtn"/>',
':d'  :  '<img src="emotions-fb/devil.png" title="devil" alt=":d" class="embtn" />',
':O'  :  '<img src="emotions-fb/gasp.png" title="gasp" alt=":O" class="embtn"/>',
':e'  :  '<img src="emotions-fb/frown.png" title="frown" alt=":e" class="embtn"/>',
':f'  :  '<img src="emotions-fb/glasses.png" title="glasses" alt=":f" class="embtn"/>',
':D'  :  '<img src="emotions-fb/grin.png" title="grin" alt=":D" class="embtn"/>',
':g'  :  '<img src="emotions-fb/grumpy.png" title="grumpy" alt=":g" class="embtn"/>',
':L'  :  '<img src="emotions-fb/heart-beat.png" title="hearts" alt=":L" class="embtn"/>',
':l'  :  '<img src="emotions-fb/heart.png" title="heart" alt=":l" class="embtn"/>',
':m'  :  '<img src="emotions-fb/broken-heart.png" title="broken-heart" alt=":m" class="embtn"/>',
':^'  :  '<img src="emotions-fb/kiki.png" title="kiki" alt=":^" class="embtn"/>',
':*'  :  '<img src="emotions-fb/kiss.png" title="kiss" alt=":*" class="embtn"/>',
':v'  :  '<img src="emotions-fb/pacman.png" title="pacman" alt=":v" class="embtn"/>',
':)'  :  '<img src="emotions-fb/smile.png" title="smile" alt=":)" class="embtn"/>',
':#'  :  '<img src="emotions-fb/squint.png" title="squint" alt=":#" class="embtn"/>',
':p'  :  '<img src="emotions-fb/tongue.png" title="tongue" alt=":p" class="embtn"/>',
':='  :  '<img src="emotions-fb/unsure.png" title="unsure" alt=":=" class="embtn"/>',
':o'  :  '<img src="emotions-fb/upset.png" title="upset" alt=":o" class="embtn"/>',
':;'  :  '<img src="emotions-fb/wink.png" title="Wink" alt=":;" class="embtn"/>',
':r'  :  '<img src="emotions-fb/rose.png" title="Rose" alt=":r" class="embtn"/>',
':x'  :  '<img src="emotions-fb/poo.png" title="Poo" alt=":x" class="embtn"/>',
':1'  :  '<img src="emotions-fb/ears.png" title="Poo" alt=":1" class="embtn"/>',
':2'  :  '<img src="emotions-fb/mouth.png" title="Poo" alt=":2" class="embtn"/>',
':3'  :  '<img src="emotions-fb/eyes.png" title="Poo" alt=":3" class="embtn"/>',
}

function Emotions (text) {

    if (text == null || text == undefined || text == "") return;
        var pattern = /:-?[()*^#=;abcdDefghilLmoOprvxz123]/gi;
        return text.replace(pattern, function (match) {
            return typeof emoticons[match] != 'undefined' ? emoticons[match] : match;
        });
    }
}

这是我的代码,表情符号在发送消息时会发生变化,但只有当我发送类似:)或者p这样的情况时它才有效:p它不会对像大的那样有帮助:大便:我不能理解为什么......当我刷新或其他人收到它保留的信息,就像原来只有字符而不是图像...

1 个答案:

答案 0 :(得分:0)

检查你的正则表达式模式 - 它匹配“:”后跟可选的“ - ”,然后匹配“[()* ^#=; abcdDefghilLmoOprvxz123]”中的一个字符

所以它无法匹配“:poop:” - 用一些交互式正则表达式测试器检查它,例如:https://regex101.com/r/dkZVpA/1

匹配:

:)
:-)
:poop
:poop:

你可以使用一种模式:

/:-?[()*^#=;abcdDefghilLmoOprvxz123]+:?/gi

与正则表达式测试人员玩得开心! :)

至于图片,您必须向我们展示更多代码 - 它们在哪里以及您如何检索它们。