Javascript regex replace text with emoticons

后端 未结 3 1337
忘了有多久
忘了有多久 2021-01-07 11:40

I need to replace text like ;) or :p by emoticon but I can\'t create a regex in order to detect this. Now i can detect only like :wink:

3条回答
  •  情书的邮戳
    2021-01-07 12:17

    I modified AK1's answer and provided an example.

    // Official Twitch robot emotes: https://twitchemotes.com
    var emoticons = {
      ':)'   : 'ebf60cd72f7aa600',
      ':('   : 'd570c4b3b8d8fc4d',
      ':o'   : 'ae4e17f5b9624e2f',
      ':z'   : 'b9cbb6884788aa62',
      'B)'   : '2cde79cfe74c6169',
      ':\\'  : '374120835234cb29',
      ';)'   : '3407bf911ad2fd4a',
      ';p'   : '3407bf911ad2fd4a',
      ':p'   : 'e838e5e34d9f240c',
      'R)'   : '0536d670860bf733',
      'o_O'  : '8e128fa8dc1de29c',
      ':D'   : '9f2ac5d4b53913d7',
      '>('   : 'd31223e81104544a',
      '<3'   : '577ade91d46d7edc'
    }
    // Convert the emoticon map entries into their fully-qualified paths.
    mapIdsToPaths(emoticons,
                  'https://static-cdn.jtvnw.net/jtv_user_pictures/',
                  'chansub-global-emoticon-',
                  '24x18');
    
    // Replace all possible emotes in each paragraph.
    document.querySelectorAll('p').forEach(e => e.innerHTML = replaceEmoticons(e.innerHTML, emoticons));
    
    function replaceEmoticons(text, emotes) {
       return Object.keys(emotes).reduce((result, emote) => {
          return result.replace(new RegExp(RegExpEscape(emote), 'gi'), function(match) {
            return (img => img != null ? '' : match)(emotes[match]);
          });
        }, text);
    }
    
    // helper function to escape special characters in regex
    function RegExpEscape(text) {
      return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    }
    
    // Map emote ids to their URLs.
    function mapIdsToPaths(emotes, url, prefix, size) {
      Object.keys(emotes).forEach((id) => {
        emotes[id] = url + prefix + emotes[id] + '-' + size + '.png';
      });
    }

    Hello ;)

    How are you :)?

    o_O Today was not a good day... :(

提交回复
热议问题