DEV Community

Nam Phạm
Nam Phạm

Posted on • Edited on

4 1

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^^

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️