How can I convert an emoji string to it's icon while writing?

Question

I'm currently developing my own chat. Now I want to extend my chat input so that when I enter for example :-), it should instantly change to 🙂 when I write inside my contenteditable div (which makes it more complex).

I've tried to find out how WhatsApp Web does this but I'm not really coming forward. This is my code:

jQuery( document ).ready( function ( $ ) {
	$( "#input" ).keypress( function ( e ) {
		if ( e.which === 13 && !e.shiftKey ) {
			$( "#messages" ).scrollTop( $( "#messages" ).prop( "scrollHeight" ) );
			$( "#messages" ).append( "<div class=\"message right\">" + $( this ).html() + "</div>" );
			$( this ).html( "" );
      e.preventDefault();
		}
	} );
  
  $( "#input" ).on( "input", function () {
	  console.log( $( this ).html() );
  } );
} );

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.date-area {
  margin-top: -35px;
}

.spacer {
  height: 35px;
}

#input {
  border: 1px solid;
  margin-top: 10px;
  width: 100%;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block;
    color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>
<div id="input" contenteditable="true" placeholder="Enter a message"></div>

The interesting thing with WhatsApp Web is that when I press the deletion key, the emoji goes back to :-). How do they do it? Is there an extension? I'd be cool if I didn't need an extension.

Update

I've updated my code and added an input function.

Answer 1

This would be my approach.

Create an array with objects of the following class.

class Emoji {
    constructor(emojiSymbol, textCode) {

        this.symbol = symbol; // :-)
        this.textCode = textCode; // &#1F60A
    }
}

I assume that users text will be saved as a string when its typed.

Regarding ---> Now I want to extend my chat input so that when I enter for example :-), it should instantly change to 🙂

You have to keep track of the user input. To be more specific you have to create a function that will check every word that the user writes. If its found inside the array of Emoji symbols, it will remove the symbol and it will replace it with the textcode.

-- The function will be enabled if a word has 3 or more characters.

-- The function will stop working after the user press space or if there are more than 5 or 6 consecutive characters, depends how large is the symbols for the emoji.

Example String -> I am going to work :-)

1) It will check the I.

Because the word is less that three characters the function wont be enabled

2) It will check the am. Same as 1.

3) It will check the going.

When the user types the third character "i" the function will be enabled. It will save the index of the 'g' character. The index can be calculated: Total length of the current text message - 3.

It will take the goi and start looking inside the array of Emoji objects symbol if it finds a corresponding one it will replace it with the textCode inside the Emoji class.

User types the fourth character it will start looking for the "goin"......

4) It will check the to.

Same as 1 and 2.

5) It will check the work

Same as 3.

6) It will check the :-)

Same as 3 with the difference that it will find the object inside the array with the corresponding symbol and it will replace it with the textCode.

Regarding --> The interesting thing with WhatsApp Web is that when I press the deletion key, the emoji goes back to :-). How do they do it? Is there an extension? I'd be cool if I didn't need an extension.

When the user press delete button, You have to check backwards up to a specific number of consecutive characters. if they correspond to an emoji you replace the textCode with a symbol.

Example String -> I am going to work &#1F60A

I assume that the :-) corresponds to this textCode -> &#1F60A.

The function will search backwards. It will save the ending index which will be the index of "A" (&#1F60A) and the starting index will be "&". If it finds an object with the same textCode it will replace it with the symbol.

Answer 2

I've not tried this, but here's a general idea:

Maintain a dictionary(ie, a JS object) that maps all the text emojis to an actual emoji's hex-code. The hex-code corresponding to most common emojis are available here : https://www.w3schools.com/charsets/ref_emoji_smileys.asp

 const emojiMap = {
                        ":-)" : "&#1F60A", //happy face
                        ":-(" :  "&#1F641", //sad face
                        /**...and so on...**/
                     }

Now you can check if your input string matches anything from this map and then render the corresponding HTML hex-code to the DOM, like :

//Just some pseudo code, please change implementation as per your need.

if(inputString.includes(':-)')){
                render(emojiMap[':-)']);
         }