Skip to content

Instantly share code, notes, and snippets.

@varkor
Last active September 9, 2024 14:08
Show Gist options
  • Save varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341 to your computer and use it in GitHub Desktop.
Save varkor/ca697f6fd59f60b5b9a8aeaa6d7cb341 to your computer and use it in GitHub Desktop.
Disable automatic emoticon → emoji conversion in WhatsApp Web
// ==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();
}
})();
@varkor
Copy link
Author

varkor commented May 11, 2017

@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, ^_^, >_<, ;-))

@SmartManoj
Copy link

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

@nx10
Copy link

nx10 commented Nov 5, 2022

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

@Tomblarom
Copy link

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

@ThePixelbrain
Copy link

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**...

@varkor
Copy link
Author

varkor commented Nov 7, 2022

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.

@czert
Copy link

czert commented Nov 7, 2022

@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 :)

@Tomblarom
Copy link

Tomblarom commented Nov 7, 2022

Is this also others' experience?

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

@nx10
Copy link

nx10 commented Nov 7, 2022

@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.

@MrJustify
Copy link

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.

@sakehl
Copy link

sakehl commented Nov 9, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment