与JavaScript网络上的表情符号

Question

我要聊天，我想添加表情符号支持。

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时起作用。刷新或另一个人会收到它始终保持的消息，就像原始的那样，只有字符而不是图像...

Answer 1

检查您的正则表达式模式 - 它匹配"："，其次是可选的" - "，然后从集合中的一个字符" [((*^＃=; abcdddefghillmooprvxz123]

所以它无法匹配"：poop：" - 与一些交互式正则待遇测试仪检查，例如：https：//regex101.com/r/dkzvpa/1

匹配：

:)
:-)
:poop
:poop:

您可以使用模式：

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

与Regex测试仪一起玩！：(

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