Emoji converter for WhatsApp web - from ":P" to "😝"

I don't use emoji's on WhatsApp very often. But recently, as I was texting using WhatsApp web, I inserted in an emoji and just as I was about to send it, I decided to select everything (ctrl + A) and cut it (ctrl + X). Later during the conversation, I decided to paste what I had selected and I observed that the emoji that I added was coming up just as it was. I was curious to know if WhatsApp uses a rich text editor, but it doesn't. Aparently, the emoji that I was using is a standalone Unicode character. I did a quick printing on Chrome developer console to verify that and Google search to know more about it.

"😝" is the emoji that I used to use very frequently. Infact, back in the day when I was using the initial versions of Facebook chat, I used to press on ":P" after almost every message. After entering the WhatsApp days, I changed my habit as the shortcut no longer works. Now that I discovered the emoji is a Unicode character, I have decided to have some fun with it. I shall write a simple JavaScript code to automatically convert ":P" into "😝".

To begin with, I opened up WhatsApp web, chose a person to message and then opened up the Chrome Developer Console and inserted the following code. Node that I used 'querySelectorAll' with the parameter specified in the code after inspecting the HTML element where we type the message.

var div = document.querySelectorAll('[spellcheck=true]')[0];

div.addEventListener("DOMCharacterDataModified", function (event) {

    div.innerHTML = div.innerText.replaceAll(':P', '😝');

});

After this, as I typed in any message, it would come up reversely. For instance, if I type in "batman", the message area would have "namtab". For some reason, the cursor gets reset to the begginning everytime the value of 'innerHTML' is set. Even so, if I type in "batman P:", it would come up with "namtab 😝", which means that this could work. I just need to make sure that the cursor pointer does not get reset to the beginning.

But, I was not able to find a direct way to set the cursor to the end. WhatsApp doesn't use the standard methods of text inputs, like 'textarea' or 'input' tags. Instead, it uses a 'div' and some extensive JavaScript coding to make it behave like an 'input' or 'textarea'. I need to find a workaround for that.

One of the easiest way is to simply take the last entered text and move it to the end. The 'event' variable will have the information about the data of the current and the previous states. I could use this to my advantage.

var div = document.querySelectorAll('[spellcheck=true]')[0];

div.addEventListener("DOMCharacterDataModified", function (event) {

    div.innerText = (event.prevValue + event.newValue[0]).replaceAll(':P', '😝');

});

This will still have the curser to be present at the beginning. But, then again, it serves my purpose.

Now that there is a working basic method, one could create a Chrome Extension and have the process automated. You can take inspiration from my blogpost 'How to Create your own Ad Blocker Chrome Extension' for the same.

Let me know in the comments below if you have any emoji's that you want to create a shortcut like this. If you have a better solution for this, then please do let me know here as well.