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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

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!