I was recently working on a Discord bot that had to detect the number of emotes in a given message. Today I'll share my process with you, including the newer JavaScript RegEx feature that finally solved the issues I was having.

How Unicode Emoji Work

The Unicode Consortium defines specific character codes for each emoji. They even maintain a helpful emoji chart as a reference. As an example, U+1F600 corresponds to the 😀 emoji.

Some emoji consist of multiple Unicode characters. This is most common with the flag emoji, which consists of the "regional indicators" that make up the country's two-letter country code.

This means the United States flag, 🇺🇸, consists of the two Unicode characters U+1F1FA and U+1F1F8, which correspond to the regional indicators U and S.

As a fun fact, it is up to the operating system to determine how to render an emoji. If you are on Windows, for example, you won't see a flag above. You'll see US.

What are Discord Emotes?

One of Discord's many features is allowing communities to upload their own custom emotes. These emotes are identified by a name, and are used with the syntax :emote_name:.

However, the way they are identified by the client/API is different. Each emote has a unique ID, and they're sent in the message content as <:emote_name:1234567890>, or <a:emote_name:1234567890> for animated emotes.

You can see this in Discord by putting a backslash \ before the emote and sending it. It will render something like this:

How to Match Emoji and Emotes with RegEx

My original approach had two different RegEx phrases.

I was using /(<a?)?:\w+:(\d{18}>)?/g to catch the Discord emotes. This RegEx was successfully picking up Discord emotes, which was great!

I paired it with /:[^:\s]*(?:::[^:\s]*)*:/g to match the Unicode emoji, which only partially worked. The problem here was that I was seeing some emotes being counted twice – because the Discord RegEx was matching them. And others were being missed entirely.

So, with RegEx being what it is, I tried to make it more complex. <:[^:\s]+:\d+>|<a:[^:\s]+:\d+>|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]|\ufe0f)/g was a bit more successful in matching the built-in emoji, but still wasn't perfect. This RegEx was designed to match unicode characters specifically.

I played around with trimming whitespace, using the word boundary \b character, and a few other tweaks, before finally giving up and doing some research.

And then I discovered Unicode Property Escapes. This RegEx feature allows you to add the u flag to your RegEx, unlocking the Unicode Properties denoted with the \p character.

With some additional research, I was able to find the Emoji Character properties – specifically, the Extended_Pictograph property. This enabled me to update the RegEx to a final, functional value:

/<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu

The \p{Extended_Pictographic} property seems to match Unicode emotes as well as character modifiers (often used for skin tones in emoji).

Conclusion

This RegEx is currently running in my production code and hasn't shown any issues yet.

Hopefully this article has helped you. If you are interested in exploring Unicode Property Escapes further, the Unicode Consortium offers a full list of the available values.

Happy Coding!

In this article, I'll explain what Twitter Emoji – or Twemoji – are and why you might want to use them.

Why should you use Twitter Emojis?

A couple of months ago, I started working on a project of mine, and I needed to allow users to select different icons for their input.

After giving it some thought, I decided to use emojis instead of icons, as everyone already knows about them, and they are available almost everywhere.

Web app example with native emojis

Easy enough, right? Well, not really. Like everything else, emojis come with their own problems that you may not know about until you spend some time working with them.

One of the most common issues with emojis is that they are very inconsistent in design and support across different operating systems and even different browsers.

For example, if you select a specific emoji on your phone, it may look very different on your laptop, or it may end up showing as a square or as a box if your OS doesn’t have the latest Unicode support.

If you have a lot of emojis all over your project, this could turn into a significant user experience problem and start annoying your users. So it was time for me to figure out a way to fix it before it began driving users away from the project.

After doing some research, I came across Twitter’s emoji set! Twemoji is an open-source library that provides standard emoji support across all the platforms. It makes it very easy to support all the latest emojis across different OSs and browsers and have them all look the same.

This is all I needed, so I didn’t hesitate a minute to integrate it into my project, and it solved all of my problems.

Web app example with Twitter emojis

Alright, that’s pretty much the backstory. Let’s get our hands dirty with some code now and see how Twemoji works.

How Does Twemoji Work?

In short, Twemoji has an alternative SVG and PNG for each Unicode emoji. It allows us to import them from either their CDN or locally and render each as an image instead of Unicode text.

This means that they are supported everywhere, and we always have access to the latest emojis.

Twemoji Examples

How to Get Started with Twemoji

To get started, we have to import Twemoji into our HTML document. To do so, let's copy and paste the following into our document's <head> tag.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

Next, we have to use the library that we just imported and have it parse our Unicode into Twemojis.

There are two ways to go about parsing your emojis, and I’m going to cover both and let you decide which one suits your needs the better.

Parse the entire Body contents

The first and easier option is to have Twemoji parse our entire DOM and automatically convert each Unicode emoji and replace it with a Twemoji.

To implement this, all we have to do is use the package that we have just imported and pass our document body to it like this:

twemoji.parse(document.body);

Once we call twemoji.parse and pass document body to it as our argument, it will parse everything inside the body. And it will replace the text Unicode emojis with Twemoji images without compromising any surrounding notes.

At this point, your HTML document should look like the following. Once you open it in the browser, you should see the Twemoji.

<html>
    <head>
        <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
    </head>
    <body>
        📮
    </body>
    <script>
        twemoji.parse(document.body)
    </script>
</html>

Keep in mind that this method comes with some performance penalties as we are running this operation across every element inside our body, which could be pretty costly.

Manually parse each Emoji

For my project, I ended up going with the manual parsing route. It gave me more control over how things wer being processed and reduced the performance penalty over parsing the entire document.

But this method is more involved, and I wouldn’t recommend it unless you have a good reason to decide on manually parsing your emojis instead of parsing the entire document.

To understand the difference here, it is important to know how the parse method works:

If the first argument to the twemoji.parse is an HTMLElement, the method will automatically parse the element and replace the emojis within the document. But if the first element is a string, the method will parse that single emoji and allow us to receive the data in a callback function that we can define.

Back to our HTML document, let’s pass in our emoji as a string, provide a callback method, and print the arguments to the console.

const emoji = "📮"
twemoji.parse(emoji, {
    callback: (icon, options) => {
        console.log(icon, options)
    }
})

// Console output
// 1f4ee {base: 'https://twemoji.maxcdn.com/v/14.0.2/', ext: '.png', size: '72x72', callback: ƒ, attributes: ƒ, …}

As you can see, the callback options give us all the information that we need to construct the source URL and add it to our document as an image.

Next, let’s define a method that takes the options and constructs our source URL.

function constructTwemojiURL(icon, options) {
    return ''.concat(
        options.base, 
        options.size, 
        '/',
        icon,         
        options.ext   
    );
}

We can now call this method from the callback to get the source URL, then create a new image tag and append it to our document.

const emoji = "📮"
twemoji.parse(emoji, {
    callback: (icon, options) => {

        // create the image tag
        const img = document.createElement('img');

        // assign the image source
        img.src = constructTwemojiURL(icon, options)        
        img.alt = "Twemoji"

        // append the tag to our document body
        document.body.append(img)

    }
})

Finally, if we open the HTML document in our browser, we should see our Twemoji. Your HTML document should look like the following at this point:

<html>
    <head>
        <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
    </head>
    <body></body>
    <script>
        function constructTwemojiURL(icon, options) {
            return ''.concat(
                options.base, 
                options.size, 
                '/',
                icon,         
                options.ext   
            );
        }

        const emoji = "📮"
        twemoji.parse(emoji, {
            callback: (icon, options) => {

                // create the image tag
                const img = document.createElement('img');

                // assign the image source
                img.src = constructTwemojiURL(icon, options)        
                img.alt = "Twemoji"

                // append the tag to our document body
                document.body.append(img)

            }
        })


    </script>
</html>

Conclusion

That’s pretty much it! In this article, we talked about why you may decide to use Twemojis in your web app, and we have covered two different ways of implementing this depending on your use case.

If you are interested in the project that I am building, it is called LogSnag.

LogSnag is a simple event tracking tool that makes it easy to track anything important within your projects in real-time and receive personalized push notifications. You can checkout logsnag.com to learn more about the project.

LogSnag Screenshot

But sometimes it's hard to find the right emoji to use. So I decided to prepare a comprehensive list of them so you can simply copy and paste the ones you need into any editor.

What We'll Cover

• How to Use Emoji
  • How to Use the Unicode Characters
• List of All Emoji
  • Smiley Face Emojis
  • Emotional Faces Emojis
  • Faces with Tongue Emojis
  • Neutral Faces Emojis
  • Sleepy Faces Emojis
  • Sick Faces Emojis
  • Concerned Faces Emojis
  • Negative Faces Emojis
  • Costume Faces Emojis
  • Faces that require more than one unicode character
  • Cat Faces Emojis
  • Monkey Faces Emojis
  • Emotion Emojis
  • Hands and other Body Parts Emojis
  • Person Emojis
  • Family Emojis
  • Animals and Nature Emojis
  • Food and Drinks Emojis
  • Travel and Places Emojis
  • Transport Emojis
  • Time Emojis
  • Sky and Weather Emojis
  • Activity Emojis
  • Award Medals Emojis
  • Sport Emojis
  • Games Emojis
  • Arts and Crafts Emojis
  • Clothing Objects Emojis
  • Sound Emojis
  • Musical Instrument Emojis
  • Phone Emojis
  • Computer Emojis
  • Light and Video Emojis
  • Book and Paper Emojis
  • Mail Emojis
  • Writing Emojis
  • Office Emojis
  • Tools Emojis
  • Science Emojis
  • Medical Emojis
  • Household Emojis
  • Other Objects Emojis
  • Symbols
  • Arrow Emojis
  • Religion
  • Zodiac
  • AV Symbols
  • Gender
  • Math Symbols
  • Punctuation Symbols
  • Currency
  • Other Symbols
  • Keycap
  • Alphanumeric Symbols
  • Japanese Buttons
  • Geometric Emojis
  • Flags
  • Country Flags

How to Use Emoji

To use these emoji, you can directly copy and paste them into the editor of any social media platform, or wherever you want to use the emoji.

Different platforms and devices display emoji in different ways. For example, Apple devices and Facebook might make them wavy, and they may be slightly rounded on Twitter. Certain country flags might not work on Windows and may just display two-letter country codes instead.

But overall, the majority of the emoji listed in this article still work cross-platform.

How to Use the Unicode Characters

Unicode characters are universal encoding standards that assign a number to every character, emoji, or symbol.

To insert any of the emojis in HTML, for example, remove the U+ that all the characters start with, type in the hexadecimal character reference, add an ampersand (&), number sign (#) and x at the front, and a semi-colon at the end.

For example 🤣 would insert a "roll on the floor" emoji in HTML. I was able to escape the character from being displayed directly by wrapping backticks around it. Without wrapping backticks around the characters, I have this: 🤣.

For Unicode characters that have decimals, especially symbols, you can insert them in HTML without adding an x. For example — gives you an em dash (—).

For emojis with more than one unicode character, you have to include all the unicode characters and combine them with semi-colon(s) for it to work.

For instance, the US flag emoji has two unicode characters – U+1F1FA U+1F1F8. U+1F1FA alone won't work and U+1F1F8 alone won't work. But combining both will work – 🇺🇸. This is the code that made it work: 🇺🇸

Same thing applies to the woman golfing emoji that has four total unicode characters – U+1F3CC, U+FE0F, U+200D, U+2640, and U+FE0F. None of them will work alone, but combinig all of them like this 🏌️‍♀️ leads to the emoji – 🏌️‍♀️

List of All Emoji

Smiley Face Emojis

Emotional Faces Emojis

Faces with Tongue Emojis

Faces with Hands Emojis

Neutral Faces Emojis

Sleepy Faces Emojis

Sick Faces Emojis

Concerned Faces Emojis

Negative Faces Emojis

Costume Faces Emojis

Faces that require more than one unicode character

Cat Faces Emojis

Monkey Faces Emojis

Emotion Emojis

Hands and other Body Parts Emojis

Person Emojis

Family Emojis

Animals and Nature Emojis

Food and Drinks Emojis

Travel and Places Emojis

Transport Emojis

Time Emojis

Sky and Weather Emojis

Activity Emojis

Award Medals Emojis

Sport Emojis

Games Emojis

Arts and Crafts Emojis

Clothing Objects Emojis

Sound Emojis

Musical Instrument Emojis

Phone Emojis

Computer Emojis

Light and Video Emojis

Book and Paper Emojis

Mail Emojis

Writing Emojis

Office Emojis

Lock Emojis

Tools Emojis

Science Emojis

Medical Emojis

Household Emojis

Other Objects Emojis

Symbols

Warning Emojis

Arrow Emojis

Religion

Zodiac

AV Symbols

Gender

Math Symbols

Punctuation Symbols

Currency

Other Symbols

Keycap

Alphanumeric Symbols

Japanese Buttons

Geometric Emojis

Flags

Country Flags