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

Incredible Demos

  • By
    WordPress-Style Comment Controls Using MooTools or jQuery

    WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery. The XHTML Notice that we place the links into...

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

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!