DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Nam Phแบกm
Nam Phแบกm

Posted on • Updated on

Using string's replaceAll function to convert emoticons into emojis

For us, who are 8Xes and familiar with Yahoo Messenger, using emoticons is fun remembering. And even until today, we and some 10Xes still type them as well ๐Ÿ˜€. We really miss those days ๐Ÿ™. Nowadays, people are with smartphones and emojis is the norm. But still, emojis are hard to type especially on desktop keyboards where typing emoticons is much easier. This let me to the thinking 'Can we use emojis in the form of emoticons?' ๐Ÿ˜€. And clearly, it's a 'yes' and in this article, I'll show you how as well as a clear detailed explanation ๐Ÿ˜€. Isn't that cool ๐Ÿ˜Ž. (Note: The text above use the converter I wrote ๐Ÿ˜‰)

The motivation is to show you how to use string's replaceAll function to do the trick in its second form and... for fun, of course ๐Ÿ˜Ž.

The web tool

You can even have fun even before understand the magic behind the tool by just using it to turn the emoticons into emojis :D. To do it, prepare directory and

Create the UI

Create a html file with the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Emoticons to Emojis</title>
        <script src="regex.js"></script>
        <script src="run.js"></script>
    </head>
    <body>
        <h1>Convert the emoticons to emojis</h1>
        <div>
            <button onclick="handleClick()">Click to convert emoticons to emojis</button>
        </div>
        <div>
            <textarea id="input" rows="10" cols="80"></textarea>
        </div>
        <div>
            <textarea id="output" rows="20" cols="80" readonly></textarea>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

and you have the UI

Get the helper library

My script I write use a regex builder from https://github.com/wyantb/js-regex so grab the script file at https://github.com/wyantb/js-regex/raw/master/regex.js and put it into directory. Its name is regex.js as referenced by the html.

Create the main script file

Create a run.js file and copy the following code to it

let emoticons = {
    "(:": "๐Ÿ™ƒ",
    ":)": "๐Ÿ™‚",
    ":')": "๐Ÿฅฒ",
    ":))": "๐Ÿ˜‚",
    "=))": "๐Ÿคฃ",
    ";)": "๐Ÿ˜‰",
    ":D": "๐Ÿ˜€",
    ":P": "๐Ÿ˜‹",
    "B)": "๐Ÿ˜Ž",
    ":*": "๐Ÿ˜—",
    ":(": "๐Ÿ™",
    ":'(": "๐Ÿ˜ฅ",
    ":((": "๐Ÿ˜ญ",
    ":o": "๐Ÿ˜ฎ",
    ">:(": "๐Ÿ˜ ",
    ">:-(": "๐Ÿ˜ก",
}

const pattern = (function () {
    let r = regex.create().either();
    let cmp = function (a, b) {
        let d = a.length - b.length;

        if (d)
            return -d;

        if (a < b)
            return -1;

        if (a > b)
            return 1;

        return 0;
    }

    for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)

    return new RegExp(r.endEither().peek(), "gu");
})();

function getEmoji(emoticon) {
    if (emoticon in emoticons)
        return emoticons[emoticon];

    return "";
}

function cvE2E(str) {
    return str.replaceAll(pattern, getEmoji)
}

function handleClick() {
    document.getElementById("output").value = cvE2E(document.getElementById("input").value);
}
Enter fullscreen mode Exit fullscreen mode

Open the web page and use it now. Have fun then.

Understand how it works

In order to convert emoticons to emojis, you have to map and emoticon to an emoji. The following code defines the mapping

let emoticons = {
    "(:": "๐Ÿ™ƒ",
    ":)": "๐Ÿ™‚",
    ":')": "๐Ÿฅฒ",
    ":))": "๐Ÿ˜‚",
    "=))": "๐Ÿคฃ",
    ";)": "๐Ÿ˜‰",
    ":D": "๐Ÿ˜€",
    ":P": "๐Ÿ˜‹",
    "B)": "๐Ÿ˜Ž",
    ":*": "๐Ÿ˜—",
    ":(": "๐Ÿ™",
    ":'(": "๐Ÿ˜ฅ",
    ":((": "๐Ÿ˜ญ",
    ":o": "๐Ÿ˜ฎ",
    ">:(": "๐Ÿ˜ ",
    ">:-(": "๐Ÿ˜ก",
}
Enter fullscreen mode Exit fullscreen mode

As it is an object, it maps emoticons to emojis and you can extend it as well. For this article, I'll use some of them for the demonstration only, try to add more ๐Ÿ˜‰

The key point of converting emoticons to emojis is to use string's replaceAll function in junction with a regular expression that matches and extracts emoticons from the string. It is done by using the helper library, with minor trick here. The idea here is to create a regular expression that matches either of emoticons, hence

for (let key of Object.keys(emoticons).sort(cmp))
        r.literals(key)
Enter fullscreen mode Exit fullscreen mode

in the code. But just iterating through the object fetching its key to add to the pattern isn't enough. There is a catch here. You must match the longer string first, or else, the result is wrong. For example the emoticon :)) must be matched before :). That is why you have to sort the keys array using a comparer cmp as shown in the code before creating the pattern.

The final piece is the string's replaceAll function in its second form: replaceAll(pattern, replacementAsAFunction). As many of us use replaceAll(pattern, replacement) with replacement as a string in most of the cases but here, it would require a function the get the corresponding emoji for the matched emoticon. So replacementAsFunction would take a matched emoticon and return the corresponding emoji. It is getEmoji function in the code and cvE2E is the converting function. The rest can be infered easily.

I hope you understand how the code works as well as knowing the second form of replaceAll function in case you haven't ๐Ÿ˜‰. Have fun using the tool and adding emoticons then ๐Ÿ˜‰.

PS: if you added more emoticons, share so everybody can use it^^

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

โญ๏ธ๐ŸŽ€ JavaScript Visualized: Promises & Async/Await

async await