Disable automatic emoticon → emoji conversion in WhatsApp Web

whatsapp-emoticon-preserver.user.js

// ==UserScript==
// @name			WhatsApp Emoticon Preserver
// @namespace		https://gist.github.com/varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341
// @version			0.5
// @author			varkor
// @description		Disable automatic emoticon → emoji conversion in WhatsApp Web
// @match			https://web.whatsapp.com/
// @grant			none
// ==/UserScript==

(() => {
	"use strict";
	if (window.location.hostname !== "web.whatsapp.com") {
		window.location = "https://web.whatsapp.com/";
	} else {
		const fixed = new Set();
		const fix = function () {
			const input = document.querySelector('[data-tab="1"]');
			if (input && !fixed.has(input)) {
				const volatile = new RegExp(["(y)", "(n)", ":-)", ":)", ":-(", ":(", ":-p", ":p", ":-|", ":|", ":-\\", ":-d", ":d", ":-*", "<3", "^_^", ">_<", ";-)"].map((string) => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")).join("|"), "gi");
				input.addEventListener("input", (event) => {
					const selection = window.getSelection();
					let containers = null;
					let start = null;
					let end = null;
					if (selection.rangeCount >= 1) {
						const range = selection.getRangeAt(0);
						containers = [range.startContainer, range.endContainer];
						start = range.startOffset;
						end = range.endOffset;
					}
					const walker = document.createTreeWalker(input, NodeFilter.SHOW_TEXT);
					let node;
					while (node = walker.nextNode()) {
						node.nodeValue = node.nodeValue.replace(volatile, (match, offset) => {
							if (containers !== null) {
								if (containers[0] === node && start > offset) {
									start += Math.min(match.length - 1, start - offset);
								}
								if (containers[1] === node && end > offset) {
									end += Math.min(match.length - 1, end - offset);
								}
							}
							return match.split("").join("\u200B");
						});
					}
					if (containers !== null) {
						selection.removeAllRanges();
						const range = document.createRange();
						range.setStart(containers[0], start);
						range.setEnd(containers[1], end);
						selection.addRange(range);
					}
				});
				fixed.add(input);
			}
		};
		window.addEventListener("click", fix);
		window.addEventListener("paste", () => setTimeout(fix, 400));
		fix();
	}
})();

Hi @varkor, hi all,
thanks a lot for this great contribution!
As my informatics skills are quite poor, may anybody be so kind to post instructions "for dummies" to execute it (e.g. via Mozilla's JS console as suggested by @Spaak)?
Thanks in advance

Thanks a lot for this awesome script.
Does anybody knows a way to automatically run it every time I visit https://web.whatsapp.com/ ?
I am able to run it via console, but I am to lazy to keep copying the script into the console.
Thanks in advance from me as well.

@Spaak maybe I'm just stupid, but how do I run it from the console? (using chrome)

@Timo0918 in Chrome, if you push F12, you'll get the developer tools pop up. (Note that on some keyboards you might have to disable special function keys which are sometimes mapped to the same physical keys as the F* keys.) There will be a tab called 'Console', open it. Copy/paste the entire script above into that console and press Enter, that should do it.

@Spaak ok, thanks. last time I hit enter it just opened a new line. I restarted but there was no difference. now it works. wierd..
thanks a lot

Use MonkeyWrench extension to automatically apply to the web.whatsapp.com URL (note you'll have to double-escape the backslashes before pasting into MW, since it strips one set of them out for some reason)

@smimon What do you mean by double-escaping the backslashes? I noticed that it is indeed not working with MW, but how do I fix this?

Sorry, I forgot that Gist doesn't send notifications, so I hadn't been checking back at all!

I've updated the first post with a short guide to using the script as a bookmarklet. It works in Chrome, but unfortunately appears to be blocked by a longstanding issue in Firefox — you'll need to install an add-on to automatically enable the script in Firefox, if you don't want to manually paste it into your developer console, like @Spaak described, every time. (I haven't tested the other browsers yet, but I imagine it should work fine in any other up-to-date browser.)

Update for Firefox users: There was a bug that was preventing this script working in Firefox even in the developer console, so if you were finding that it wasn't working, try the updated version.

Thanks, this is just what the doctor ordered! In case anyone is interested, I created a Tampermonkey / Greasemonkey script out of this snippet:

// ==UserScript==
// @name         WhatsApp emoticon preserver
// @namespace    https://gist.github.com/varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341
// @version      1.0
// @description  Disable automatic graphical emoticon replacement on web.whatsapp.com
// @author       varkor
// @match        https://web.whatsapp.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
	if (window.location.hostname !== "web.whatsapp.com") {
		window.location = "https://web.whatsapp.com/";
	} else {
		const fixed = new Set();
		function fix () {
			const input = document.querySelector('[data-tab="1"]');
			if (input && !fixed.has(input)) {
				const volatile = new RegExp(["(y)", "(n)", ":-)", ":)", ":-(", ":(", ":-p", ":p", ":-|", ":|", ":-\\", ":-d", ":d", ":-*", "<3", "^_^", ">_<", ";-)"].map((string) => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")).join("|"), "gi");
				input.addEventListener("input", (event) => {
					const selection = window.getSelection();
					let containers = null;
					let start = null;
					let end = null;
					if (selection.rangeCount >= 1) {
						const range = selection.getRangeAt(0);
						containers = [range.startContainer, range.endContainer];
						start = range.startOffset;
						end = range.endOffset;
					}
					const walker = document.createTreeWalker(input, NodeFilter.SHOW_TEXT);
					let node;
					while (node = walker.nextNode()) {
						node.nodeValue = node.nodeValue.replace(volatile, (match, offset) => {
							if (containers !== null) {
								if (containers[0] === node && start > offset) {
									start += Math.min(match.length - 1, start - offset);
								}
								if (containers[1] === node && end > offset) {
									end += Math.min(match.length - 1, end - offset);
								}
							}
							return match.split("").join("\u200B");
						});
					}
					if (containers !== null) {
						selection.removeAllRanges();
						const range = document.createRange();
						range.setStart(containers[0], start);
						range.setEnd(containers[1], end);
						selection.addRange(range);
					}
				});
				fixed.add(input);
			}
		}
		window.addEventListener("click", fix);
		fix();
	}
})();

Just copy/paste this in Create a new script dialog in [Tamper|Grease]monkey, save and you're good to go.
@verkor it would be really cool if you would release your snippet in OpenUserJS or GreasyFork so that userscript addon users could find it more easily.

@okuuva: Thanks — I've added the script to OpenUserJS. That should make it much more convenient!

@varkor: No problem. That's awesome, thanks!

Does not seem to work on firefox at all, tried all 3 methods. Error message in console:

SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function

Greasemonkey doesn't seem to do anything, the bookmark does not even open whatsapp web and does nothing either. Anything I can do? Pretty annoyed by the autoconversion right now!

@Flick1: Are you on the latest version of Firefox? I think older versions of JavaScript were stricter about the form of functions — I'll try to address the issue directly later, but updating is something to try if you haven't already.

Edit: This issue should be fixed for older versions of Firefox now.

I tried this script yesterday and it worked. not anymore today... did whatsapp change something?

@lucidBrot: What browser are you using? I modified the script slightly to fix an issue in some browsers, but it appears to be working in all the browsers I've tested. Are you using the user script or the bookmarklet?

@varkor I updated my firefox and everything works fine now. Thanks a lot!

A heads up: even the updated script version did not work on my older firefox version, 30 something. I don't think that is a huge problem though.

Any way this can be applied to Franz? ( http://meetfranz.com/ ) they have a Plugin-API afaik

@pfreak — Franz plugins currently only allow the application to be extended with more services (e.g. messaging clients). It won't be possible to use this script with Franz until they add user-script support (which is an existing feature request).

@varkor I was using the bookmarklet in chrome. (Also tried the RunJS plugin with a slightly modified version). But I'm even more confused r/n... I just tried the bookmarklet again and it worked. Then I tried again by reloading the page (without using the bookmarklet) and it still worked. Then I opened a clean install of firefox and it STILL worked. (working = it did not replace ":P" with an emoji)

I mean nice if it works now but I'm confused.... did whatsapp change their interface?

@lucidBrot — It seems WhatsApp have rolled back some of their changes to their emoticon conversion. Now they no longer convert emoticons without noses (e.g. :) won't be converted, but :-) will be, etc.). Other emoticons such as ^_^ and >_< are still converted. It's less aggressive now, but it hasn't been completely removed.
(The full list of emoticons that are still converted are: (y), (n), :-), :-(, :-p, :-|, :-\\, :-d, :-*, <3, ^_^, >_<, ;-))

@varkor The d should be uppercase in :-d --> :-D

It's happening again. Now even without noses. Seems like they changed the page structure quite a lot so this script is broken.

Just found this as well.. This is so annoying. There's a difference when using emojis and normal smileys. They don't get it.

If anyone is keen enough to recreate this for the current WhatsApp website, please link it here. (Or if anyone finds something working, please link it as well.)

It's so annoying that they don't simply add an option to turn it off in the settings. Why do they have to be such a pain in the a**...

When I try typing an emoticon on WhatsApp web, it will automatically convert to an emoji, but if I press backspace, it will revert to the emoticon. It's still a little annoying, but at least it doesn't prevent the use of emoticons altogether. Is this also others' experience? If so, I personally am not so motivated to fix the issue, because it's easy enough to press backspace, and it would take some time to figure out how WhatsApp have modified their page structure in the meantime.

@varkor Same experience here, though it's annoying enough that I stumbled upon your script. Oh well, time for me to contact their support, I guess :)

Is this also others' experience?

This drives me crazy. Same for people over on reddit.

@varkor yes backspace is possible, but as others commented it's very annoying. I tried to write a script myself a couple days ago but seems like they really don't want you to. It's easy to get a query selector to the input (which is now a role="textbox" div) via [data-tab="10"][role="textbox"] but any change will be reverted back instantly.

Can't someone write a script which will file a feedback report constantly? I have given feedback through all possible means but to no avail.

Edited it a bit to make it work for the new web WhatsApp. Can be found here:

https://gist.github.com/sakehl/4a843a22f7cdb58942d635784e8152c7