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
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Retrieve Google Analytics Visits and PageViews with PHP

    Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...

  • By
    Styling CSS Print Page Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

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!