Put emoticons in the chat of my site [closed]

Question

Put emoticons in the chat of my site [closed]

Navigation

#1 by (2 votes)

5

I would like to know how in php or javascript how to put emoticons as the person types the text and a command, eg:

Hello good morning [/ sun] or I'm fine [: smile]

Anyway, regardless of the command how to do it to be replaced by an image in the text, be it .png or .gif?

php javascript jquery tags

asked by anonymous 26.10.2016 / 08:22

1 answer

How do I get the sql that linq generates for the VS2013 debug Handle values from a data.frame

score 2 · Answer 1

In javascript you can do this:

Use [: smile] and [: sad] to generate the emoticons.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textareaid="input"></textarea>
<div id="result"></div>

<script>
  $('#input').keyup(function() {
    var emoticonsMap = {
      '[:smile]': 'https://cdn2.macworld.co.uk/cmsdata/features/3595098/smiley_face_thumb.png',
      '[:sad]': 'http://orig14.deviantart.net/ef35/f/2016/036/c/c/sad_emoji_by_catstam-d9qkdaq.png'
    }

    var formatedWord = this.value.split(' ').map(function(word, i) {
      if(emoticonsMap[word]) {
        word = "<img src='" + emoticonsMap[word] + "'>";
      }
      return word;
    });

    $('#result').html(formatedWord.join(' '));
  });
</script>

It takes the text every time the user types something new and maps the words separated by space, to add a new emoticon just put the key and the link inside json emoticonsMap.

===================================================== =====================

Below is a more simplified form and I believe it has a great gain in performance compared to the above code in large texts:

But in this case we can not use the brackets on the keys. *

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textareaid="input"></textarea>
<div id="result"></div>
<script>
  var emoticonsMap = {
    ':smile:': 'https://cdn2.macworld.co.uk/cmsdata/features/3595098/smiley_face_thumb.png',
    ':sad:': 'http://orig14.deviantart.net/ef35/f/2016/036/c/c/sad_emoji_by_catstam-d9qkdaq.png',
  }

  $('#input').keyup(function() {
    var text = this.value;

    $.each(emoticonsMap, function(key, link) {
      text = text.replace(new RegExp(key, 'g'), "<img src='" + link + "'>");
    });

    $('#result').html(text);
  });
</script>

It takes the text every time the user types something new and loops with all the emoticons to search and replace if it finds.

* NOTE: Use caution when using elements that can be interpreted by RegExp.