Match Emojis with Regular Expressions

By  on  

When experimenting with unicode property escapes, to identify accented letters in strings, it reminded me of a question I had a few years ago: what is the best way to identify and then replace emojis in a string? I first noticed this practice when using emojis in Facebook -- sometimes Facebook would replace an emoji with one of their own custom images, likely because another device may not support that emoji.

Much the way you can match accented characters, you can use unicode property escapes to match emojis:

const emojis = "😂😂💯".match(/\p{Emoji_Presentation}/gu);

// ["😂", "😂", "💯"]

I've previously seen massive arrays of every emoji ever created, and it may be possible that {Emoji_Presentation} doesn't contain all emojis across all devices, but this regex has matched every case I've come across.

Happy emoji....ing!

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    CSS Columns

    One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a...

  • By
    Using MooTools to Instruct Google Analytics to Track Outbound Links

    Google Analytics provides a wealth of information about who's coming to your website. One of the most important statistics the service provides is the referrer statistic -- you've gotta know who's sending people to your website, right? What about where you send others though?

Discussion

  1. Roberto

    Great stuff!

    But actually there are quite a few where Emoji_Presentation does not work. Probably most of (all?) marked here as not Emoji_Presentation https://www.unicode.org/Public/UCD/latest/ucd/emoji/emoji-data.txt but Extended_Pictographic or just Emoji.

    .match(/\p{Emoji}/gu);

    work too well (matching 1-9, # and *) but

    .match(/(\p{Emoji_Presentation}|\p{Extended_Pictographic})/gu)

    seems to do the charm :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!